jQuery控制音频播放与停止示例 

<!DOCTYPE html writingsuggestions="false">
<html>
    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
    </head>
    <body>
        <audio id="myAudio">
            <source src="media/short.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
         
        <button id="playButton">play</button>
         
        <script>
            $(document).ready(function(){                
                var isplay=false;
                var audio = $('#myAudio')[0];
              $('#playButton').click(function(){                        
                if (isplay){
                    audio.pause();                    
                    audio.currentTime=0;
                    isplay=false;
                    $(this).text('play');
                }else {
                    $(this).text('playing');
                    isplay=true;
                    audio.play();
                }                
              });
              audio.addEventListener('ended', function() {
                    // 音乐播放结束后的操作
                    $('#playButton').text('play');
                    isplay=false;
                    console.log('音乐播放结束');
                  });
            });
        </script>        
    </body>
</html>

注意：

JS好像未提供停止函数，需要暂停+播放时间归零实现。

停止需要增加事件监听器。

EDGE浏览器新增特性， html 根元素增加 writingsuggestions="false" 避免告警。

posted @ 2024-11-11 15:59  walteronly1  阅读(3)  评论(0)  编辑  收藏  举报