Question

我有这个插件，它将不同的样式应用于html5 <audio>元素，并为不支持.mp3文件格式的浏览器提供flash回退。我遇到的问题是，一旦你开始播放一首歌，然后点击任何其他歌曲上的播放，它们将同时播放，这是糟糕的用户体验。

我试图找出如何编辑插件以使其一次只能播放一首歌，所以说如果用户听一首歌然后点击另一首歌，首先应该暂停，依此类推。我不完全确定，但我认为需要按照这些方式进行编辑：

    playPause: function() {
      if (this.playing) this.pause();
      else this.play();
    },

然而，插件中有不同的地方似乎处理播放和暂停歌曲，所以我不确定这是完全正确的行。我仍然是jQuery的新手，并且不能完全弄清楚这个大音频库是如何工作的，我一直在阅读代码注释，但仍然无法解决这个问题。

该插件的完整代码可在此处获取：http://freshbeer.lv/mg/js/audio.min.js

官方插件网站：http://kolber.github.io/audiojs/

您可以访问我的演示页面查看问题，只需点击几个播放器上的播放，您就会看到它们同时播放：http://freshbeer.lv/mg/index.html

Answer 1

使用addEventListener和play事件。除了按下播放按钮的玩家外，这会暂停所有玩家。

        audiojs.events.ready(function () {
            var as = audiojs.createAll();

            $('audio').each(function () {
                var myAudio = this;
                this.addEventListener('play', function () {
                    $('audio').each(function () {
                        if (!(this === myAudio)) {
                            this.pause();
                        }
                    });
                });
            });
        });

暂停除激活之外的所有其他玩家。 <audio>元素</audio>的jQuery音频插件

1 个答案: