音频停止功能

我正在播放一个小音频剪辑点击每个链接在我的导航

HTML代码:

<audio tabindex="0" id="beep-one" controls preload="auto" >
<source src="audio/Output 1-2.mp3">
<source src="audio/Output 1-2.ogg">
</audio>

JS代码:

$('#links a').click(function(e) {
e.preventDefault();
var beepOne = $("#beep-one")[0];
beepOne.play();
});

到目前为止一切正常。

问题是当一个声音剪辑已经运行，我点击任何链接没有发生。

我试图停止点击链接时已经播放的声音，但在HTML5的音频API中没有直接事件

我试着遵循代码，但它不工作

$.each($('audio'), function () {
$(this).stop();
});

有什么建议吗?

338202 次浏览
小开
最佳答案

而不是stop()，你可以尝试:

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

这应该会有预期的效果。

小开

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

在js中:

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

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

ply.src = "";//停止播放器，你必须替换源为空

小开

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

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

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

小开

shamangeorge写道:

手动设置currentTime可以触发音频元素上的canplaythrough事件。

这确实会发生，暂停也会触发pause事件，这两者都使得该技术不适合用作“停止”方法。此外，设置由zaki建议的src将使玩家尝试加载当前页面的URL作为媒体文件(并且失败)，如果autoplay是启用的-设置src为null是不允许的;它将始终被视为一个URL。除了破坏播放器对象，似乎没有提供“停止”方法的好方法，所以我建议只放弃专用的停止按钮，而提供暂停和返回按钮-停止按钮不会真正增加任何功能。

小开

这种方法是“蛮力”的，但前提是“允许”使用jQuery。用div(这里的id为“plHolder”)包围你的“player”<audio></audio>标签。

<div id="plHolder">
<audio controls id="player">
...
</audio>
<div>

然后这个javascript应该工作:

function stopAudio() {
var savePlayer = $('#plHolder').html(); // Save player code
$('#player').remove(); // Remove player from DOM
$('#FlHolder').html(savePlayer); // Restore it
}
小开

从我自己的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下削减它，需要清除源代码，并将其加载回来。希望这能有所帮助。

小开

这是我做stop()方法的方式:

代码中的某个地方:

audioCh1: document.createElement("audio");

然后在stop()中:

this.audioCh1.pause()
this.audioCh1.src = 'data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAVFYAAFRWAAABAAgAZGF0YQAAAAA=';

这样我们就不会产生额外的请求，旧的被取消，我们的音频元素处于清洁状态(在Chrome和FF测试):>

小开

我相信检查音频是否处于播放状态并重置currentTime属性会很好。

if (sound.currentTime !== 0 && (sound.currentTime > 0 && sound.currentTime < sound.duration) {
sound.currentTime = 0;
}
sound.play();
小开

这个方法有效:

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();
};
小开

对我来说，代码工作得很好。的问世(+)

var Wmp = document.getElementById("MediaPlayer");
Wmp.controls.stop();


<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6"
standby="Loading áudio..." style="width: 100%; height: 170px" id="MediaPlayer">...

希望这对你有所帮助。

小开

我喜欢做的是使用Angular2完全删除控件，然后当下一首歌有音频路径时，它会被重新加载:

<audio id="audioplayer" *ngIf="song?.audio_path">

然后当我想在代码中卸载它时，我这样做:

this.song = Object.assign({},this.song,{audio_path: null});

当下一首歌曲被分配时，控件完全从头开始重新创建:

this.song = this.songOnDeck;
小开

解决这个错误的简单方法是捕获错误。

audioElement.play()返回一个承诺，所以下面带有.catch()的代码应该足以处理这个问题:

function playSound(sound) {
sfx.pause();
sfx.currentTime = 0;
sfx.src = sound;
sfx.play().catch(e => e);
}

注意:为了向后兼容，您可能需要将箭头函数替换为匿名函数。

小开

我也有同样的问题。如果它是一个收音机，停止应该停止流并且onplay转到生活。我看到的所有解决方案都有缺点:

  • player.currentTime = 0继续下载流。
  • player.src = ''引发error事件

我的解决方案:

var player = document.getElementById('radio');
player.pause();
player.src = player.src;

还有HTML

<audio src="http://radio-stream" id="radio" class="hidden" preload="none"></audio>
小开

在铬合金中有时不能工作，

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

就像这样改变，

sound.currentTime = 0;
sound.pause();
小开

在IE 11中，我使用了组合变体:

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

只有2次重复可以防止IE在pause()后继续加载媒体流，并因此淹没磁盘。

小开

我在寻找一些类似的东西，因为制作一个应用程序，可以用来图层彼此的声音聚焦。我最终做的是-当选择一个声音时，用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').each( function() {
$(this)[0].pause();
});
小开

这有什么问题吗?

audio.load()

如规范和中数所述:

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

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


提交答案