Zenn
🔊

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

2023/09/24に公開
HTML
JavaScript
tech

はじめに

初めてFetchAPIを使った音声ファイルの取得＆再生を試したので、備忘録として残します。
※FetchAPIのレスポンス内の、Blobを利用すると音声再生に使えたという学び。

環境

OS・ツールなど バージョン 備考
MacOS Ventura( 13.2.1 ) ー
VSCode 1.81.1 -
Live Server 5.7.9 VSCodeの拡張機能。簡易的にローカルサーバーを立ち上げ可能
Google Crome 116.0.5845.187（Official Build） （arm64） -

前提条件

今回は以下条件で試しました。

実装したコード

index.html

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>SoundFile Fetch Test</title>
    <meta charset="UTF-8" />
    <script src="main.js"></script>
  </head>
  <body>
    <button id="btn" type="button" onclick="FetchAndPlayTest();">
      音声ファイル取得＆再生
    </button>
  </body>
</html>

main.js

main.js
function FetchAndPlayTest() {
  let url = "音声ファイルのURL";
  
  fetch(url)
  .then(response => {
    if (response.ok) {
      // Blobデータとして取得    
      return response.blob();
    } else {
      throw new Error(`Fetch Error: ${response.status}`);
    }
  })
  .then(blobData => {
    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 => {
    console.log(e.message);
  });
}

動作イメージ

ボタン押下後、再生コントロールの表示とともに音声を自動再生します。

動作イメージ-01
動作イメージ-02

参考サイト

Discussion