如何使用JavaScript从外部URL播放音频文件

Question

i有一个应用程序（a），该应用程序向其他应用程序提出AJAX请求（b）以获取Wave Sound文件的链接。然后，我想使用该链接直接从我的应用程序播放该声音文件（a）。

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

在chrome

中

无法播放.... NotSupportedError：无法加载，因为没有 找到了支持的来源。

在Firefox

中

无法播放.... notsupportederror：媒体资源由 SRC属性或分配的媒体提供商对象不合适。

这是我的回调方法，它在我的应用程序（b）中返回Ajax请求后触发。

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://www2.cs.uic.edu/~i101/SoundFiles/StarWars60.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

尝试使用import功能：

const playAudio = async () => {
    const importRes = await import("./path/to/audio.mp3"); // make sure the path is correct
    var audio = new Audio(importRes.default);
    try {
      await audio.play();
      console.log("Playing audio");
    } catch (err) {
      console.log("Failed to play, error: " + err);
    }
}

Answer 3

而不是在html 5 <audio> tag中使用它。

HTML 5可以在不使用JavaScript的情况下播放和控制任何音频格式。