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

Question

我有一个应用程序（A），它通过 Ajax 请求从另一个应用程序（B）获取波浪声音文件的链接。然后，我想使用该链接直接从我的应用程序（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文件？

- Junior

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>

- Blue

---

这段代码对我来说无效。当我点击“播放音频”链接时，没有任何声音播放。 - Junior

我正在使用 FireFox 57.0.2 (64-bit)。另外，创建 fiddle 时代码可以正常工作 https://jsfiddle.net/o2gxgz9r/20484/。 - Junior

即使在此处使用onclick，它也不起作用，但正如@MikeA所说，在jsfiddle上可以工作，为什么？ - Hernán Eche

@WilliamEntriken，所以你因为在macOS中没有支持你的音频文件而给我点了个踩？ - Blue

@WilliamEntriken 我正在使用Chrome浏览器，之前无法正常工作的原因是因为它托管在一个非安全的网站上，跨域请求因此失败了。当Stack Overflow切换到https时，这个答案就失效了。将音频文件切换到一个通过https托管的文件，现在可以让它正常工作了。 - Blue

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);
    }
}

- timthedev07

---

只有这个方法对我起作用。 - gutterball

我很高兴它有帮助！ - timthedev07

这对我也起作用了，但如果使用TS，则需要稍微调整一下才能导入音频。谢谢。 - Wisnu

Answer 3

相反，应该在HTML 5的<audio>标签中使用它。

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

- adil khan