我在寻找一些类似的东西，因为制作一个应用程序，可以用来图层彼此的声音聚焦。我最终做的是-当选择一个声音时，用Javascript创建音频元素:

                const audio = document.createElement('audio') as HTMLAudioElement;
                audio.src = getSoundURL(clickedTrackId);
                audio.id = `${clickedTrackId}-audio`;
                console.log(audio.id);
                audio.volume = 20/100;
                audio.load();
                audio.play();

然后，附加子文件实际上表面的音频元素

document.body.appendChild(audio);

最后，当取消选择音频时，您可以停止并完全删除音频元素-这也将停止流。

            const audio = document.getElementById(`${clickedTrackId}-audio`) as HTMLAudioElement;
            audio.pause();
            audio.remove();

这有什么问题吗?

audio.load()

如规范和MDN中所述:

此元素之前播放的任何媒体资源的回放停止。

调用load()将中止所有涉及该媒体元素的正在进行的操作

这个方法有效:

audio.pause();
audio.currentTime = 0;

但如果你不想每次停止音频时都写这两行代码，你可以做以下两件事之一。第二个我认为是更合适的，我不知道为什么“javascript标准之神”没有制定这个标准。

第一种方法:创建一个函数并传递音频

function stopAudio(audio) {
    audio.pause();
    audio.currentTime = 0;
}

//then using it:
stopAudio(audio);

第二种方法(首选):扩展Audio类:

Audio.prototype.stop = function() {
    this.pause();
    this.currentTime = 0;
};

我有一个javascript文件，我称之为“AudioPlus.js”，我包括在我的html之前的任何脚本，将处理音频。

然后你可以在音频对象上调用stop函数:

audio.stop();

最后CHROME的问题与“canplaythrough”:

我没有在所有浏览器中测试这个，但这是我在Chrome中遇到的一个问题。如果你尝试在一个音频上设置currentTime，该音频有一个“canplaythrough”事件监听器附加到它，那么你将再次触发该事件，这可能会导致不期望的结果。

因此，解决方案是在第一次调用之后删除事件侦听器，这与附加了一个事件侦听器并且确实希望确保它不会再次触发的所有情况类似。就像这样:

//note using jquery to attach the event. You can use plain javascript as well of course.
$(audio).on("canplaythrough", function() {
    $(this).off("canplaythrough");

    // rest of the code ...
});

奖金:

请注意，您可以向Audio类(或任何本地javascript类)添加更多自定义方法。

例如，如果你想要一个“restart”方法重新启动音频，它可以是这样的:

Audio.prototype.restart= function() {
    this.pause();
    this.currentTime = 0;
    this.play();
};

作为旁注，因为我最近使用了在接受的答案中提供的停止方法，根据这个链接:

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

手动设置currentTime可以触发音频元素上的canplaythrough事件。在链接中，它提到了Firefox，但我在Chrome上手动设置currentTime后遇到了这个事件。所以如果你有行为附加到这个事件，你可能会在一个音频循环中结束。

从我自己的javascript函数切换播放/暂停-因为我正在处理一个广播流，我希望它清除缓冲区，以便侦听器最终不会与广播电台不同步。

function playStream() {

        var player = document.getElementById('player');

        (player.paused == true) ? toggle(0) : toggle(1);

}

function toggle(state) {

        var player = document.getElementById('player');
        var link = document.getElementById('radio-link');
        var src = "http://192.81.248.91:8159/;";

        switch(state) {
                case 0:
                        player.src = src;
                        player.load();
                        player.play();
                        link.innerHTML = 'Pause';
                        player_state = 1;
                        break;
                case 1:
                        player.pause();
                        player.currentTime = 0;
                        player.src = '';
                        link.innerHTML = 'Play';
                        player_state = 0;
                        break;
        }
}

事实证明，只是清除currentTime并不能在Chrome下削减它，需要清除源代码，并将其加载回来。希望这能有所帮助。

首先，你必须为音频元素设置一个id

在js中:

var ply = document.getElementById('player');

var oldSrc = cp .src;//只是为了记住旧的源代码

厚度。SRC = "";//要停止播放，你必须将源代码替换为空