S3にアップしたファイルを、URLの有無によって表示、非表示を切り替える

いつもお世話になっております。
Vue.js / Laravel / AWS を用いてポートフォリオ作成しています。
URLの存在有無によって表示を切り分けたいのですが、うまくいかないのでご教授いただきたいです。

#実装したいこと

① Vue側から音声をアップロード（済）
② 投稿詳細ページで音声を取得し、audio タグを使って再生（未実装）
④ 音声がアップロードされてない場合にはaudioタグを非表示にする（済）

といった具合です。

#具体的な手順と該当のコード

① 音声ファイルに該当するURLを取得（コンソールにて取得確認済）

エラーコードで処理を切り分けて、URLが取得できる時（音声がアップされてる時）はURLを後述の mp3_url に代入。取得できない時は null を代入。

vue
1async mounted() {
2      this.response = await axios.get("https://post.s3-ap-northeast-1.amazonaws.com/local/"+this.username+"/"+this.$route.params['postId']+".mp3")
3      .then((res) => {
4        return res;
5      }, this);
6      if (this.response.status === 403) {
7        console.log("エラー！");
8        this.mp3_url = null;
9        console.log(this.mp3_url);
10      } else {
11        console.log("取得した");
12        this.mp3_url = this.response.config.url;
13        console.log(this.mp3_url);
14      }
15    },

② 取得したURLを data ()内の mp3_url に代入

vue
1data() {
2    return {
3      mp3_url: ""
4    };
5  },

③ audio タグで音声を取得

v-if を使い null の場合にはaudioタグが表示されないようにする。

vue
1<audio
2  v-if="mp3_url!==null"
3  id="audio"
4  controls
5  :src="mp3_url"
6/>

#発生してる問題

URLが取得できた際に audio タグが表示されるのですが、音声が再生されません。
エラーが出て null を代入したときに表示されないようにするのは確認できてます。

ちなみにですが、

vue
1this.mp3_url = "https://www.ne.jp/asahi/music/myuu/wave/menuettm.mp3";

先程のURL取得処理でelse以下で上記のように全く関係ないURLを代入した際には問題なく再生されます。
ですが、該当するURLの取得はコンソールで確認できてるので、どこに修正を加えれば良いかわからず、お手上げ状態です。

皆様のお知恵をお借りしたいです。
どうかよろしくお願い致します。

tabuu

2021/03/16 23:56

S3から取得したURLをブラウザのアドレス欄に貼り付けたら音声は再生されますか？実際に生成されたHTML上のaudioタグはどのようになっていますか？

Take.Y

2021/03/17 01:16 編集

tabuu 様ご返答ありがとうございます。 > 取得したURLをブラウザのアドレス欄に貼り付けたら音声は再生されますか？該当するファイルがダウンロードされ、再生できます。 > HTML上のaudioタグこちらは特に問題なく取得できています。

tabuu

2021/03/17 06:42

>該当するファイルがダウンロードされ、再生できます。ブラウザ上で直接再生されないですか？ Chromeの開発者ツールでレスポンスヘッダーのContentTypeを確認してみてください。「audio/mpeg」等になっていますか？

Take.Y

2021/03/17 23:15

> ブラウザ上で直接再生されないですか？ブラウザでは再生されず、ダウンロードしてから再生できる状態になります。 > レスポンスヘッダーのContentType 該当URLを貼り付けた際に出てくるレスポンスヘッダーのContentTypeには binary/octet-stream と記載されています。