Question

我正在创建一个简单的html5播放器，它的工作原理如下：页面上有“n”个玩家用户点击播放按钮，播放按钮变为暂停按钮（使用toggleClass（“暂停 - 现在”））如果用户点击另一个播放按钮，则应停止之前播放的音频并且其按钮应变为“播放按钮” 我使用下面的代码，一切正常，唯一的事情就是播放音频和用户播放另一个音频时，播放音频的按钮保持固定，并且在更改为播放按钮时不会改变

<audio id="simpleplayer<?php echo $player_no; ?>">
  <source src="<?php echo $ogg_play; ?>" type="audio/ogg">
  <source src="<?php echo $mp3_play; ?>" type="audio/mpeg">
  Your Browser Does not Support Audio Players
</audio> 
<a class="play-now" title="Play Now" id="simpleplay<?php echo $player_no; ?>" rel="simpleplayer<?php echo $player_no; ?>"></a>
<script>
    var audioplayer<?php echo $player_no; ?> = document.getElementById("simpleplayer<?php echo $player_no; ?>");

    function pauseothers(){
        $('audio').each(function () {
            var myAudio = this;
            this.addEventListener('play', function () {
                $('audio').each(function () {
                    var pla = $(this);
                    if (!(this === myAudio)) {
                        this.pause();
                        pla.next().toggleClass('pause-now');  
                    }
                });
            });
        });
    }
    $("#simpleplay<?php echo $player_no; ?>").click(function(){
        if (audioplayer<?php echo $player_no; ?>.paused) {
            pauseothers();
            audioplayer<?php echo $player_no; ?>.play();
        }
        else {
           audioplayer<?php echo $player_no; ?>.pause();
        }
        $(this).toggleClass('pause-now');  
    });
</script>

我也在jsfiddle中设置了一个简单的例子 http://jsfiddle.net/PzLcR/ 这段代码唯一的问题是，当播放音频时，你点击另一个播放按钮，前一个音频按钮不会改变，请帮助!!

HTML5音频播放器问题

0 个答案: