如何在点击时动态加载/播放/暂停多源 HTML5 音频？

Posted 2023-02-25

【中文标题】如何在点击时动态加载/播放/暂停多源 HTML5 音频？

【英文标题】：How can i dynamically load/play/pause multiple-source HTML5 audio on click?

【发布时间】：2012-02-06 21:11:39

【问题描述】：

我有一个内容滑块，设置为在每次点击时播放/停止。

问题：我希望它在第二次点击时暂停。现在它不会暂停。有什么想法吗？

在此处查看网站：http://dev.alsoknownas.ca/music/（主页上的音频品牌部分）。

代码如下：

**已编辑以反映 Lloyd 建议的代码如下：

<audio id="player"></audio>

这是脚本：

$(document).ready(function()
$("span.1").attr("data-src","song.mp3");
$("span.2").attr("data-src","song2.mp3");
$("span.3").attr("data-src","song3.mp3");
$("span.4").attr("data-src","song4.mp3");
$("span.5").attr("data-src","song5.mp3");
);

$("span.1,span.2,span.3,span.4,span.5").click(function () 
  var player = document.getElementById("player");
  player.src = this.getAttribute("data-src");
  player.play();
);

【参考方案1】：

对于这个标记：

<audio id="player"></audio>

<span class="1">one</span>
<span class="2">two</span>

使用这个脚本：

$("span.1")
    .attr("data-src-mp3","song1.mp3")
    .attr("data-src-ogg","song1.ogg");
$("span.2")
    .attr("data-src-mp3","song2.mp3")
    .attr("data-src-ogg","song2.ogg");

$("span[data-src-mp3]").click(function () 
    var player = document.getElementById("player"),
        $this = $(this);

    if ($this.hasClass("selected")) 
        if (player.paused) 
            player.play();
         else 
            player.pause();
        
     
    else 
        $("span[data-src-mp3].selected").removeClass("selected");
        $this.addClass("selected");
        $(player)
            .empty()
            .append($("<source>").attr("src", $this.attr("data-src-mp3")))
            .append($("<source>").attr("src", $this.attr("data-src-ogg")))
        player.play();
    
);

现场演示：http://jsfiddle.net/75lb/8cGBx/

【讨论】：

我认为我没有在我的帖子中明确我的问题，我已经对其进行了编辑以使其更有意义。一切都完全正常，除了为了暂停，它需要双击（可能与顶部的 .bind 有关......

我理解了这个问题。我的回答为您提供了所需的功能，无需单击两次，而且代码量要少得多。如果您不是在寻找重构的解决方案，对不起 - 我会在回到我的计算机后再次查看它。

感谢您的回复和解决方案，看起来它会起作用！我唯一的问题是跨度是由插件脚本创建的，我无法直接访问它们。我想我可以通过脚本为每个人添加一个“data-src”......

nah.. 我会更改小提琴以使用您的精确标记并返回给您..

也许你可能想先.empty玩家，因为source孩子现在正在积累。

【参考方案2】：

试试这个，

而不是做

$('audio').bind('play','pause', function() 

做

$('audio').bind('play pause', function(event) 

根据您的代码，默认情况下音频是暂停的，当用户单击时，它开始播放，然后在下次单击时暂停。

希望这对你有用。

【讨论】：

感谢您的回复！我试过了，不幸的是它的行为似乎没有任何不同。我假设我的问题与使用“播放”变量有关。