添加「loading」到播放器Html5 Javascript

我想添加一個音頻播放器到我的網站。我發現這個html5播放器，並希望添加一個「加載」圖像，以便在mp3仍在加載時顯示。

例：https://media.giphy.com/media/xUPGGgMQeO3KcjOCCk/giphy.gif

如何代碼添加這個功能呢？添加「loading」到播放器Html5 Javascript

 <html> 
        <head> 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
       </head> 
        <body> 


        <div class="audioplay"><img data-href="/sound1.mp3" src="/play.png" alt="play now"/></div> 

        <div class="audioplay"><img data-href="/sound2.mp3" src="//play.png" alt="play now"/></div> 

        <div class="audioplay"><img data-href="/sound3.mp3" src="/play.png" alt="play now"/></div> 


        <style> 
        .audioplay { float: left; padding-right: 20px; width: 12%; display: block; box-sizing: border-box; position: relative; min-height: 1px;} 
        .audioplaytutoriais { float: left; padding-right: 20px; width: 20%; display: block; box-sizing: border-box; position: relative; min-height: 1px;} 
        .audioplay img { width:100%;height:100%;margin-top:17%;} 
        .audioplaytutoriais img { width:100%;height:100%;margin-top:10%;} 
        .audioplay { width:63px;} 
        .audioplaytutoriais { width:63px;} 
        .audioplaytutoriais img { width:100%;height:100%;margin-top:16%;} 
        .audioplaysection { padding: 20px 0px 0px;} 
        .audioplay img {cursor: pointer;} 
        .audioplaytutoriais img {cursor: pointer;} 
        .audioplaytutoriais img { width:100%;height:100%;margin-top:16%;} 
        </style> 
<script> 
    jQuery(document).ready(function($) { 
     var audioElement = document.createElement('audio'); 
    $(".audioplay img").click(function() { 
    audioElement.setAttribute('src', $(this).attr('data-href')); 
    if($(this).hasClass('playing')){ 
     $(this).attr("src","play.png"); 
     $('.audioplay img').removeClass("playing"); 
     audioElement.pause(); 
    }else{ 
     $('.audioplay img').removeClass("playing"); 
     $('.audioplay img').attr("src","play.png"); 
     $(this).attr("src","stop.png"); 
     $(this).addClass("playing"); 
     audioElement.play(); 
    } 
    /*audioElement.addEventListener('ended', function() { 
     this.play(); 
    }, false); 

    audioElement.addEventListener("canplay",function(){ 
     $("#length").text("Duration:" + audioElement.duration + " seconds"); 
     $("#source").text("Source:" + audioElement.src); 
     $("#status").text("Status: Ready to play").css("color","green"); 
    }); 

    audioElement.addEventListener("timeupdate",function(){ 
     $("#currentTime").text("Current second:" + audioElement.currentTime); 
    }); 

    $('#play').click(function() { 
     audioElement.play(); 
     $("#status").text("Status: Playing"); 
    }); 

    $('#pause').click(function() { 
     audioElement.pause(); 
     $("#status").text("Status: Paused"); 
    }); 

    $('#restart').click(function() { 
     audioElement.currentTime = 0; 
    });*/ 
    }); 
}); 
    </script> 




        </body> 
        </html>

來源

2017-07-22 Leone

這是未經測試，但這是主意。

首先，您必須爲「loadstart」事件添加偵聽器。當觸發時，顯示圖像。然後爲「canplay」事件添加一個偵聽器。當觸發時，刪除圖像。

以下是您可以收聽的活動列表。 https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

jQuery的（文件）。就緒（函數（$）{ VAR audioElement =使用document.createElement（ '音頻'）;

/** @desc Add listener for when loading starts */ 
    audioElement.addEventListener('loadstart', function(event){ 
     // SHOW IMAGE HERE. 
     $(this).attr("src","play.png"); 
     $('.audioplay img').removeClass("playing"); 
    }.bind(audioElement)); 

    /** @desc Add listener for when loading can play */ 
    audioElement.addEventListener('canplay', function(event){ 
     // HIDE IMAGE HERE. 
     $('.audioplay img').removeClass("playing"); 
     $('.audioplay img').attr("src","play.png"); 
     $(this).attr("src","stop.png"); 
     $(this).addClass("playing"); 
    }.bind(audioElement)); 

    $(".audioplay img").click(function() { 
     audioElement.setAttribute('src', $(this).attr('data-href')); 
     if($(this).hasClass('playing')){ 
      audioElement.pause(); 
     }else{ 
      audioElement.play(); 
     }

來源

2017-07-22 03:16:10 Nuspeed1

添加「loading」到播放器Html5 Javascript

回答

相關問題