<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
初めてFetchAPIを使った音声ファイルの取得＆再生を試したので、備忘録として残します。 
※FetchAPIのレスポンス内の、Blobを利用すると音声再生に使えたという学び。
<h1 id="%E7%92%B0%E5%A2%83">
<a class="header-anchor-link" href="#%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 環境</h1>
<table>
<thead>
<tr>
<th>OS・ツールなど</th>
<th>バージョン</th>
<th>備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>MacOS</td>
<td>Ventura( 13.2.1 )</td>
<td>ー</td>
</tr>
<tr>
<td>VSCode</td>
<td>1.81.1</td>
<td>-</td>
</tr>
<tr>
<td>Live Server</td>
<td>5.7.9</td>
<td>VSCodeの拡張機能。簡易的にローカルサーバーを立ち上げ可能</td>
</tr>
<tr>
<td>Google Crome</td>
<td>116.0.5845.187（Official Build） （arm64）</td>
<td>-</td>
</tr>
</tbody>
</table>
<h1 id="%E5%89%8D%E6%8F%90%E6%9D%A1%E4%BB%B6">
<a class="header-anchor-link" href="#%E5%89%8D%E6%8F%90%E6%9D%A1%E4%BB%B6" aria-hidden="true"></a> 前提条件</h1>
今回は以下条件で試しました。
<aside class="msg message">!<div class="msg-content">
<ul>
<li>音声ファイル： WAV形式</li>
<li>API連携先： Microsoft AzureのAzureBlobStorage（公開設定とCORS設定済み） 
AzureBlobStorage上に音声ファイルをアップロードし、API連携先として利用。</li>
</ul>
</div></aside>
<h1 id="%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%9F%E3%82%B3%E3%83%BC%E3%83%89">
<a class="header-anchor-link" href="#%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%9F%E3%82%B3%E3%83%BC%E3%83%89" aria-hidden="true"></a> 実装したコード</h1>
<h2 id="index.html">
<a class="header-anchor-link" href="#index.html" aria-hidden="true"></a> index.html</h2>
<div class="code-block-container">
<div class="code-block-filename-container">index.html</div>
<pre class="language-html"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;SoundFile Fetch Test&lt;/title&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;script src="main.js"&gt;&lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;button id="btn" type="button" onclick="FetchAndPlayTest();"&gt;
 音声ファイル取得＆再生
 &lt;/button&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div><h2 id="main.js">
<a class="header-anchor-link" href="#main.js" aria-hidden="true"></a> main.js</h2>
<div class="code-block-container">
<div class="code-block-filename-container">main.js</div>
<pre class="language-js"><code class="language-js">function FetchAndPlayTest() {
 let url = "音声ファイルのURL";
 
 fetch(url)
 .then(response =&gt; {
 if (response.ok) {
 // Blobデータとして取得 
 return response.blob();
 } else {
 throw new Error(`Fetch Error: ${response.status}`);
 }
 })
 .then(blobData =&gt; {
 if (blobData) {
 var blobUrl = URL.createObjectURL(blobData);

 // Audio要素の生成
 let audioElement = document.createElement("audio");
 audioElement.id = "audioelement";
 audioElement.src = blobUrl;
 audioElement.controls = true;
 audioElement.muted = false;
 audioElement.autoplay = true;
 
 // 既に同名の要素が存在する場合は、削除
 const elm = document.getElementById("audioelement");
 if (elm) {
 elm.remove();
 }
 
 // 要素追加
 document.body.appendChild(audioElement); 
 }
 })
 .catch(e =&gt; {
 console.log(e.message);
 });
}
</code></pre>
</div><h1 id="%E5%8B%95%E4%BD%9C%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8">
<a class="header-anchor-link" href="#%E5%8B%95%E4%BD%9C%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8" aria-hidden="true"></a> 動作イメージ</h1>
ボタン押下後、再生コントロールの表示とともに音声を自動再生します。
<aside class="msg alert">!<div class="msg-content">
利用ブラウザの設定などによっては、音声が自動再生されない場合があるかもしれません。
</div></aside>
<img src="https://storage.googleapis.com/zenn-user-upload/b6300c2f2980-20230924.png" alt="動作イメージ-01" loading="lazy" class="md-img"> 
<img src="https://storage.googleapis.com/zenn-user-upload/35f4759e8b68-20230924.png" alt="動作イメージ-02" loading="lazy" class="md-img">
<h1 id="%E5%8F%82%E8%80%83%E3%82%B5%E3%82%A4%E3%83%88">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E3%82%B5%E3%82%A4%E3%83%88" aria-hidden="true"></a> 参考サイト</h1>
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/API/Response/blob" target="_blank" rel="nofollow noopener noreferrer">MDN | Response.blob()</a></li>
<li><a href="https://developer.mozilla.org/ja/docs/Web/API/HTMLAudioElement" target="_blank" rel="nofollow noopener noreferrer">MDN | HTMLAudioElement</a></li>
<li><a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/audio" target="_blank" rel="nofollow noopener noreferrer">MDN | &lt;audio&gt;: 埋め込み音声要素</a></li>
<li><a href="https://gray-code.com/javascript/load-file-with-fetch-api/" target="_blank" rel="nofollow noopener noreferrer">Fetch APIでファイルを読み込む</a></li>
<li><a href="https://www.youtube.com/watch?v=3NgVlAscdcA" target="_blank" rel="nofollow noopener noreferrer">Loading an audio file using Fetch - Web Audio API</a></li>
</ul>

[HTML/JavaScript] FetchAPIで音声ファイルを取得＆再生したい[備忘録]

Discussion