HTML5audio停止function
我正在播放一个小的audio剪辑点击我的导航中的每个链接
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的Audio API中没有直接的事件
我试过下面的代码，但它不工作
$.each($('audio'), function () { $(this).stop(); });
有什么build议吗？
而不是stop()你可以尝试：
sound.pause(); sound.currentTime = 0;
这应该有预期的效果
首先你必须为你的audio元素设置一个ID
在你的js中：
var ply = document.getElementById('player');
var oldSrc = ply.src; / /只是为了记住旧的来源
ply.src = ""; / /停止播放器，你必须没有任何东西来replace源
这是我做stop（）方法的方法：
在代码的某处：
audioCh1: document.createElement("audio");
然后在stop（）中：
this.audioCh1.pause() this.audioCh1.src = 'data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAVFYAAFRWAAABAAgAZGF0YQAAAAA=';
这样我们不会产生额外的请求，旧的被取消，我们的audio元素处于清洁状态（在Chrome和FF中testing）：>
从我自己的javascript函数切换播放/暂停 – 因为我正在处理无线电stream，我希望它清除缓冲区，以便听众不会最终与电台同步。
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下，需要清除源也加载回希望这会有所帮助。
作为一个方面的说明，因为我最近使用了接受答案中提供的停止方法，根据这个链接：
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
通过手动设置currentTime，可以触发audio元素上的“canplaythrough”事件。 在链接中提到了Firefox，但是我在Chrome上手动设置currentTime之后遇到了这个事件。 所以，如果你有这个事件附加的行为，你可能会在一个audio循环。
shamangeorge写道：
通过手动设置currentTime，可以触发audio元素上的“canplaythrough”事件。
这确实会发生什么事情，暂停也会触发pause事件，这两者都不适合用作“停止”方法。 另外，如果启用了autoplayfunction，那么将src设置为zaki的build议将会使播放器尝试加载当前页面的URL作为媒体文件（并且失败） – 将src设置为null是不允许的; 它将始终被视为一个URL。 在销毁播放器对象的时候，似乎没有提供“停止”方法的好方法，所以我build议只放下专用的停止button，并提供暂停和跳回button – 停止button不会真的添加任何function。
此方法工作：
audio.pause(); audio.currentTime = 0;
但是如果你不想在每次停止audio时写这两行代码，你可以做两件事情之一。 第二个我认为是更合适的，我不知道为什么“JavaScript标准的神”还没有制定这个标准。
第一种方法：创build一个函数并传递audio
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之前，将处理audio的任何脚本。
然后你可以调用audio对象的停止function：
audio.stop();
最后的问题与“canplaythrough”：
我没有在所有的浏览器中testing过这个，但这是我在Chrome中遇到的一个问题。 如果尝试在连接了“canplaythrough”事件侦听器的audio上设置currentTime，则会再次触发该事件，这可能会导致不良结果。
因此，类似于所有附加事件侦听器的情况下，您确实要确保不再触发的解决scheme是在第一次调用之后删除事件侦听器。 像这样的东西：
//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类）。
例如，如果你想要一个重新启动audio的“重启”方法，它可能看起来像这样：
Audio.prototype.restart= function() { this.pause(); this.currentTime = 0; this.play(); };
我有同样的问题。 如果是收音机，停止播放应该停止播放并播放。 我看到的所有解决scheme都有缺点 ：
-
player.currentTime = 0一直在下载stream。 -
player.src = ''引发error事件
我的解决scheme
var player = document.getElementById('radio'); player.pause(); player.src = player.src;
和HTML
<audio src="http://radio-stream" id="radio" class="hidden" preload="none"></audio>
这种方法是“蛮力”，但它假定使用jQuery是“允许的”。 围绕你的“播放器” <audio></audio>标签与一个div（这里是一个“plHolder”的ID）。
<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 }
我相信这将是很好的检查，如果audio播放状态，并重置currentTime属性。
if (sound.currentTime !== 0 && (sound.currentTime > 0 && sound.currentTime < sound.duration) { sound.currentTime = 0; } sound.play();
对我来说，代码工作正常。 （IE10 +）
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控制，然后重新加载时，下一首歌曲有一个audiopath：
<audio id="audioplayer" *ngIf="song?.audio_path">
然后当我想要在代码中卸载它，我这样做：
this.song = Object.assign({},this.song,{audio_path: null});
当下一首歌被分配时，控制从头开始完全重新创build：
this.song = this.songOnDeck;
解决此错误的简单方法是捕获错误。
audioElement.play（）返回一个承诺，所以下面的.catch（）代码应该足以解决这个问题：
function playSound(sound) { sfx.pause(); sfx.currentTime = 0; sfx.src = sound; sfx.play().catch(e => e); }
