如何使用 Javascript 从外部 url 播放音频文件？

Question

我有一个应用程序 (A)，它向另一个应用程序 (B) 发出 ajax 请求以获取波形声音文件的链接。然后，我想使用该链接直接从我的应用程序 (A) 播放该声音文件。

我尝试创建一个新audio标签，但在控制台中出现以下错误。

在 Chrome 中

无法播放....NotSupportedError：无法加载，因为找不到支持的源。

在火狐中

无法播放....NotSupportedError: src 属性或分配的媒体提供程序对象指示的媒体资源不合适。

这是我的回调方法，它是在 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 文件播放？

Answer 1

音频跨服务器正常工作，没有其他问题，请参见下面的示例。

这可能有多种原因导致不起作用：

• 检查网络选项卡以确保 wav 文件位于正确的位置。
• 检查控制台是否有任何无法加载的警告消息。
• 检查此问题/答案以了解其他调试步骤。
• 使用您尝试从中获取的 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...' + err);
  }
}

<a href="#" onclick="playAudio()">Play Audio</a>

Answer 2

而是在 HTML 5<audio>标记中使用它。

HTML 5 可以播放和控制任何音频格式，而无需使用 JavaScript。