Question

我在页面上有一个<audio>元素，以及多个触发不同声音的播放按钮。我使用JS替换src元素的<audio>。

当用户点击“播放”按钮时，脚本会在其上添加playing课程，如果需要，会删除其他“播放”按钮上的playing课程，替换播放器的src和发布音频。如果用户在已有playing类时单击“播放”按钮，脚本将停止音频并删除该类。当声音结束时，脚本必须删除所有playing类。

这是我的HTML：

<audio id="player">
    <source id="mp3Source" src="" type="audio/mpeg">
    <source id="oggSource" src="" type="audio/ogg">
    Your browser does not support the audio tag.
</audio>

这是JS：

var player = $('#player')[0];
var mp3Source = $('#mp3Source');
var oggSource = $('#oggSource');

$('body').on('click touchend', '.play-btn', function(ev) {
    var e = ev.originalEvent;
    e.preventDefault();

    $('.play-btn').not(this).removeClass("playing");

    if ($(this).hasClass("playing")) {
        player.pause();
    } else {
        var newSource = $(this).attr('data-sound-source');

        mp3Source.attr('src', newSource +'.mp3');
        oggSource.attr('src', newSource +'.ogg');

        player.load();
        player.play();
    }

    $(this).toggleClass("playing");
});

$('#player').bind("ended", function(){
    $(".play-btn").removeClass('playing');
});

这很好用，完全符合我的要求。但是有一个非常烦人的问题：在Safari（OS X和iOS）中，当用户离开页面然后返回到它的浏览器的Back按钮时，{如果{1}}事件发出声音，它就不会再触发，因此ended课程根本不会被删除。

它适用于Chrome，因为与Safari不同，Chrome会在用户点击“返回”按钮时重新加载整个页面。

有没有人知道导致这种烦人行为的原因，以及我如何解决这个问题？

谢谢！

当用户返回页面时，.bind（＆＃34;已结束＆＃34;）事件不会触发

0 个答案: