Hinzufügen "Laden" zu Player Html5 Javascript

Ich möchte einen Audio-Player zu meiner Website hinzufügen. Ich habe diesen html5 Player gefunden und wollte ein "loading" Bild hinzufügen, das angezeigt wird, während das MP3 noch geladen wird.

Beispiel: https://media.giphy.com/media/xUPGGgMQeO3KcjOCCk/giphy.gif

Wie diese Funktion im Code hinzufügen?Hinzufügen "Laden" zu Player 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>

Quelle

2017-07-22 Leone

Dies ist nicht getestet, aber hier ist die Idee.

Zuerst müssen Sie einen Listener für das Ereignis "loadstart" hinzufügen. Wenn das ausgelöst wird, zeigen Sie das Bild an. Fügen Sie dann einen Listener für das Ereignis "canplay" hinzu. Wenn das ausgelöst wird, entfernen Sie das Bild.

Hier finden Sie eine Liste der Ereignisse, die Sie anhören können. https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

jQuery (document) .ready (function ($) {var audioElement = document.createElement ('Audio');

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

Quelle

2017-07-22 03:16:10 Nuspeed1

Hinzufügen "Laden" zu Player Html5 Javascript

Antwort

Verwandte Themen