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

标签 javascript jquery html

我有这个插件,它对 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

最佳答案

使用 addEventListener 和播放事件。这会暂停所有播放器,但按下播放按钮的播放器除外。

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

关于javascript - 暂停除激活的玩家之外的所有其他玩家。 <audio> 元素的 jQuery 音频插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16015334/

相关文章:

javascript - 使用 jQuery 内联附加图像

javascript - Ionic 3 - Pan 事件在手机上丢失 "target"

javascript - 如果仅发生错误,则需要在提交后保留星级值

javascript - jQuery 隐藏/显示 div,带有单选按钮控件

javascript - 如何处理动态元素中的事件?

javascript - HTML 在点击时显示图像

javascript - 为 self.location 的两个 ID 设置值

ajax - CakePHP AJAX 调用

html - 如何在右侧进行搜索?

php - 如何允许某些html标签?