Question

我有播放音乐和暂停音乐的功能。它对于小样品来说简单轻便。我只是想让它发挥并停止。它似乎运行正常，但是第二次播放它时，它不会切换类，因此可以进行暂停。

这是jquery;

        var isPlaying = false;
            function playMusic(){
                    var audioElement = document.createElement('audio');
                    var audioElementSrc = $(this).attr('data-audio-src');               

                    if (isPlaying != true)
                    {
                        isPlaying = true;
                        audioElement.setAttribute('src', audioElementSrc);
                        $.get();
                        audioElement.addEventListener("loadeddata", function(){
                        audioElement.play();                
                        }, true);
                         audioElement.addEventListener("ended", function() {
                         isPlaying = false;    
                        });  
                        $(this).addClass('pause');
                        $(this).removeClass('play'); 
                        $('.pause').click(function() {
                        audioElement.pause();
                        isPlaying = false
                        $(this).removeClass('pause');
                        $(this).addClass('play');
                        });             
                    }
                    else
                    {
                        return false;
                    }           
                }

            $(function(e){
                $('.play').click(playMusic);  
            });

jsfiddle Here包含所有内容。您可以看到停止显示，然后单击它，当您再次播放时，它不会交换类。

Answer 1

你已经设法通过普通的javascript函数使这很复杂，并在每次点击播放按钮时替换音频元素。

使用更多jQuery，并存储音频元素，这样更容易

$(function (e) {
    $('.play').click(function() {
        var self = $(this).toggleClass('pause play');

        if (!this.audio) {
            this.audio = $('<audio />', {src : self.data('audio-src')}).on({
                loadeddata : function() {
                    this.play();
                },
                ended : function() {
                    self.toggleClass('pause play');
                }
            }).get(0);
        }else{
            this.audio[this.audio.paused ? 'play' : 'pause']();
        }
    });
});

FIDDLE

Answer 2

你不应该这样做

$('.pause').click(function() {
   audioElement.pause();
   isPlaying = false
   $(this).removeClass('pause');
   $(this).addClass('play');
   });

那里的代码，您应该使用像

这样的委托一次在开头添加暂停

$(".songPlayer").delegate('.pause','click', function());

这里的问题是，暂停时的事件会多次调用，因为每次点击都会连接一次

Answer 3

我在播放代码中注意到了这一点：

$('.pause').click(function() {
  audioElement.pause();
  isPlaying = false
  $(this).removeClass('pause');
  $(this).addClass('play');
});

此代码使用类.pause更改元素，但这会覆盖它所在的函数！您的主if语句也是这样的：

if (isPlaying != true)
{
// Play code here           
}
else
{
return false;
}

但你需要的是：

    if (isPlaying != true)
    {
    // Play code here           
    }
    else
    {
    // Pause code here
    }

所以你的新代码看起来像这样：

 var isPlaying = false;
            function playMusic(){
                    var audioElement = document.createElement('audio');
                    var audioElementSrc = $(this).attr('data-audio-src');               

                    if (isPlaying != true)
                    {
                        isPlaying = true;
                        audioElement.setAttribute('src', audioElementSrc);
                        $.get();
                        audioElement.addEventListener("loadeddata", function(){
                        audioElement.play();                
                        }, true);
                         audioElement.addEventListener("ended", function() {
                         isPlaying = false;    
                        });  
                        $(this).addClass('pause');
                        $(this).removeClass('play');            
                    }
                    else
                    {
                        audioElement.pause(); // This part moved from above
                        isPlaying = false
                        $(this).removeClass('pause');
                        $(this).addClass('play');
                    }           
                }

            $(function(e){
                $('.play').click(playMusic);  
            });

Jquery函数只能在第一次单击时正常工作

3 个答案: