Question

我想在我的网站上添加一个音频播放器。我发现这个html5播放器，并希望添加一个“加载”图像，以便在mp3仍在加载时显示。

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

如何在代码中添加此功能？

     <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>

Answer 1

这是未经测试的，但这是一个想法。

首先，你必须为＆＃34; loadstart＆＃34;添加一个监听器。事件。触发后，显示图像。然后为＆＃34; canplay＆＃34;添加一个监听器。事件。触发后，删除图像。

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

jQuery（document）.ready（function（$）{ var audioElement = document.createElement（＆＃39; audio＆＃39;）;

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

添加“加载”到播放器Html5 Javascript

1 个答案: