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

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

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

请参阅此处的网站：（主页上的音频品牌部分）

代码如下：

**编辑以反映劳埃德建议的代码如下：

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

对于此标记：

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

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

试试这个

而不是做

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

做

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

希望这对你有用。
我想我在帖子中没有把我的问题说清楚，我编辑它是为了让它更有意义。除了暂停外，所有操作都完全正常，需要双击（可能与顶部的.bind有关……我理解了这个问题。我的答案提供了您所需的功能，无需单击两次，代码量要少得多。如果您不是在寻找重构解决方案，对不起-我回到计算机后会再看一遍。我感谢您的回复和解决方案在上，看起来它会起作用！我唯一的问题是跨距是由插件脚本创建的，我没有直接访问它们的权限。我想我可以通过脚本向每个跨距添加一个“数据src”…不..我会更改小提琴以处理您的精确标记，然后再与您联系..也许您可能想
。清空
播放器ce
源代码
现在孩子们正在积累。感谢您的回复！我尝试了它，但不幸的是它的行为似乎没有任何不同。我假设我的问题与“playing”变量的使用有关。
$("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();
    }
});

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

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