web-dev-qa-db-ja.com

JavaScriptを使用して外部URLからオーディオファイルを再生する方法

Waveサウンドファイルのリンクを取得するために別のアプリ（B）にajaxリクエストを行うアプリ（A）があります。次に、リンクを使用して、そのサウンドファイルをアプリから直接再生します（A）。

新しいaudioタグを作成しようとしましたが、コンソールに次のエラーが表示されます。

Chromeで

再生に失敗しました.... NotSupportedError：サポートされているソースが見つからなかったため、ロードに失敗しました。

FireFox内

再生に失敗しました.... NotSupportedError：src属性で示されたメディアリソースまたは割り当てられたメディアプロバイダーオブジェクトは適切ではありませんでした。

これは、私のAppからのリンクでAjaxリクエストが返された後にトリガーされるコールバックメソッドです（B）。

function playAudio(data) {
    if(!data || !data.DownloadUrl) {
        return;
    }

    var audio = new Audio(data.DownloadUrl);  
    audio.type = 'audio/wav';

    var playPromise = audio.play();

    if (playPromise !== undefined) {
        playPromise.then(function () {
            console.log('Playing....');
        }).catch(function (error) {
            console.log('Failed to play....' + error);
        });
    }
}

どうすればこのwavファイルを再生できますか？

javascriptaudiohtml5-audiowav
6
Junior

オーディオは追加の問題なしでサーバー間で正しく機能します。以下の例を参照してください。

これが機能しない理由はいくつかあります。

  • ネットワークタブをチェックして、wavファイルが正しい場所にあることを確認します。
  • 読み込めなかった理由の警告メッセージがないかコンソールを確認してください。
  • 追加のデバッグ手順については、この question/answer を確認してください。
  • 取得しようとしているURLまたはリクエストに関する追加情報を投稿してください。
_async function playAudio() {
  var audio = new Audio('https://file-examples.com/wp-content/uploads/2017/11/file_example_WAV_1MG.wav');  
  audio.type = 'audio/wav';

  try {
    await audio.play();
    console.log('Playing...');
  } catch (err) {
    console.log('Failed to play...' + error);
  }
}_
<a href="#" onclick="playAudio()">Play Audio</a>
6
Goodbye StackExchange

代わりにHTML 5で使用してください<audio> 鬼ごっこ。

HTML 5は、JavaScriptを使用せずに任意のオーディオ形式を再生および制御できます。

0
adil khan