ウェブオーディオAPIオーディオデータをデコードできません

Question

Google Chromeでmp3オーディオファイルを読み込もうとしたときに次のエラーが発生しました：Uncaught (in promise) DOMException: Unable to decode audio data

 loadSong(url) { 
      var AudioCtx = new AudioContext(); 

      var request = new XMLHttpRequest(); 
      request.open('GET', url, true); 
      request.responseType = "arraybuffer"; 
      request.onload = function() { 
       console.log(request.response); 
       AudioCtx.decodeAudioData(
        request.response, 
        function (buffer) { 
         var currentSong = AudioCtx.createBufferSource(); 

         currentSong.buffer = buffer; 
         currentSong.connect(AudioCtx.destination); 
         currentSong.start(0); 
        }, 
        function (e) { 
         alert("error: " + e.err); 
        } 
       ); 
      }; 
      request.send(); 
     } 

ここrequest.responseのはconsole.logです：Firefoxので

ArrayBuffer(153) {} 
byteLength:0 
__proto__:ArrayBuffer 
byteLength:0 
constructor:ƒ ArrayBuffer() 
slice:ƒ slice() 
Symbol(Symbol.toStringTag):"ArrayBuffer" 
get byteLength:ƒ byteLength() 
__proto__:Object 

私はエラーThe buffer passed to decodeAudioData contains an unknown type of content.を得た。ここに私のコードです。 OGGファイルで同じエラーが発生する

Answer 1

なぜ最初の場所で複雑になるのですか？

SoundPlayer.jsなどのオーディオを処理するための外部スクリプトを使用します。これはWeb Audio APIに基づいており、DOMには触れません。

ロードSoundPlayer.jsスクリプト：

<script type="text/javascript" src="https://gustavgenberg.github.io/handy-front-end/SoundPlayer.js"></script> 

そして単に使用：

const player = new SoundPlayer(); 

player.load('file.mp3').play(); 

またはとにかくREADME.md

を読んで、あなたのコード内のUnable to decode audio dataエラーが原因ファイルに発生する可能性がありますまたはファイルの種類がサポートされていないという別の名前があります。