HTML5音频停止功能

问题描述：

我玩上各个环节的点击一个小的音频剪辑在我的导航HTML5音频停止功能

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

任何请提出建议？

答

，而不是stop()，你可以尝试使用：

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

这应该收到预期的效果

我爱你，救更多的痛苦:) – 2014-02-03 13:04:22

这不是在Chrome工作。音频元素不断加载音频，这不是应该发生的。 – Pieter 2014-11-04 19:28:24

在Chrome中，'

答

首先你必须设置一个ID为您的音频元素

在你的js

：

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

var oldSrc = ply.src; //只是记得老源

ply.src = ""; //停止播放器必须更换没事

音频流的最佳解决方案 – Hossein 2014-10-15 21:03:11

well..that将使音频源文件 – 2015-09-08 05:00:28

的另一个网络请求音频将不会播放，直到加载，这将导致播放音频不必要的延迟。 – Abhi 2015-11-26 06:51:22

答

作为一个侧面说明来源和，因为我最近在使用公认的提供的停止方法回答，根据该链接：

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

通过设置currentTime的手动一个可以点火，该音频单元上的“canplaythrough”事件。在链接中提到Firefox，但是我在Chrome上手动设置currentTime后遇到此事件。所以如果你的行为附加在这个事件上，你可能会在音频循环中结束。

答

shamangeorge写道：

通过设置currentTime的手动一个可以触发音频元素的 'canplaythrough' 事件。

这确实会发生什么，并且暂停也会触发pause事件，这两者都使这种技术不适合用作“停止”方法。此外，如果启用autoplay，则设置src如zaki建议的设置将使播放器尝试加载当前页面的URL作为媒体文件（并失败） - 不允许将src设置为null;它将始终被视为URL。除了销毁播放器对象之外，似乎没有提供“停止”方法的好方法，所以我建议只放弃专用停止按钮并提供暂停和跳回按钮 - 停止按钮不会真正添加任何功能。

答

这种方法是“蛮力”，但它假定使用jQuery是“允许的”。围绕你的“球员”<audio></audio>标签与一个股利（在这里与“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 
}

在上面的回答中，zaki解释了同样的事情，而不使用jquery。 – 2015-03-23 06:49:05

我没有试验它，但我不确定他的方法是否有效，如果有多个标签。 – user3062615 2015-03-28 17:25:26

'＃FlHolder'似乎是'＃plHolder'的一个错字 – 2015-12-02 11:26:00

答

从我自己的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");

，然后停止（）：

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

这样，我们don`不会产生额外的请求，旧的被取消，我们的音频元素处于清洁状态（在Chrome和FF中测试）：>

答

I相信最好检查音频是否正在播放状态并重置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.prototype.stop = function() { 
    this.pause(); 
    this.currentTime = 0; 
};

我有这个JavaScript文件我在任何将处理音频的脚本之前调用了包含在我的html中的“AudioPlus.js”。

然后，你可以调用停止功能的音频对象：

audio.stop();

FINALLY CHROME发出带有“canplaythrough”：

我还没有在所有的浏览器测试了这个，但是这是一个问题，我在Chrome中遇到过。如果您尝试在连接了“canplaythrough”事件侦听器的音频上设置currentTime，那么您将再次触发该事件，这可能会导致不良结果。

因此，类似于所有附加事件侦听器的情况下，您确实不会再次触发它的解决方案是在第一次调用后删除事件侦听器。事情是这样的：

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

奖金：

注意，您可以添加更多的自定义方法的音频类（或与此有关的任何本地JavaScript类）。

例如，如果你想要一个“重启”方法重新启动音频它可能看起来像：

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

'function stopAudio（audio）{ audio.pause（）; this.audioStream.src =“”; }' 这样做最终为我工作，并删除了在浏览器中播放音频时出现的Chrome浏览器中的扬声器图标。在Chrome版本59.0.3071.109上测试过 – lasec0203 2017-06-26 21:40:11

答

我的代码工作正常。（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完全卸下控制然后在下一首歌曲有一个音频路径它的重载：当我想卸载它在代码

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

注意：您可能需要更换带有匿名功能的箭头功能用于向后兼容。

答

我有同样的问题。如果是收音机，停止应该停止播放并播放live。所有的解决方案，我看到有一个缺点：

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>

HTML5音频停止功能

相关推荐