基于HTML5实现音乐播放暂停及快进后退功能

柔情只为你懂 2022-05-29 11:35 245阅读 0赞

近年来，H5的流行，加入许多标签，导致一些新手看起来有些懵，有点不太会用新标签，今天，举一个H5里比较常用的标签，audio标签，这个标签的作用在于添加一个音乐标签，可以实现它的样式，暂停，播放，快进及后退功能。其他功能比如播完一首歌，自动回到起点，或者播完一首歌，到下一首歌自动播放等功能暂未实现。以下代码仅供初学H5学习和交流，大佬请忽略。代码健壮性考虑的不周到，实现后前进后退滑动不顺畅，还请大佬提出好的解决方法。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  
    <title>Document</title>  
    <style>  
        .relative\{  
            position: relative;  
            /\*  根据自身定位  并且自身的位置保留不变 \*/  
        \}  
        .absolute\{  
            position: absolute;  
            /\* 根据最近的有定位的父元素  自身位置被顶替\*/  
        \}  
        .top10\{  
            top: 10px;  
        \}  
        .left10\{  
            left: 10px;  
        \}  
        .top50\{  
            top: 50px;  
        \}  
        .left50\{  
            left: 50px;  
        \}  
        .display-none\{  
            display: none;  
        \}  
        .h100\{  
            height: 100px;  
        \}  
        .l120\{  
            left: 120px;  
        \}  
        .process-background\{  
            width: 400px;  
            height: 4px;  
            background: \#ccc;  
        \}  
        .process-played\{  
            height: 4px;  
            background: \#ff9900;  
            width: 0;  
        \}  
        .circle\{  
            width: 15px;  
            height: 15px;  
            background: \#ff9900;  
            border-radius: 50%;  
            top: -5px;  
            box-shadow: 0 0 5px \#aaa;  
            left: 0;  
        \}  
        .ml50\{  
            margin-left: 50px;  
        \}  
        .mt20\{  
            /\* margin-top: 20px; \*/  
        \}  
    </style>  
</head>  
<body>  
      
    <audio class="au" src="source/Adam Lambert - Mad World.mp3" controls></audio>  
    <div class="relative">  
        <div class="relative w100 h100">  
            <img class="absolute play" width="50" οnclick="play()" src="img/play.jpg" alt="">  
            <img class="absolute display-none pause" width="50" οnclick="pause()" src="img/stop.jpg" alt="">  
        </div>  
        <p class="absolute l120 top10">  
            <span class="current">00:00</span>/  
            <span class="total">00:00</span>  
        </p>  
        <div class="process mt20 ml50">  
            <div class="process-background relative">  
                <div class="process-played"></div>  
                <div οnmοusedοwn="start()" class="circle absolute"></div>  
            </div>  
        </div>  
    </div>  
  
  
以下是JS代码，主要实现 播放、暂停、前进、后退功能。  
  
    <script>  
        var audio = document.querySelector('.au')  
        var timer;  
        var precent;  
        function play () \{  
            audio.play()  
            document.querySelector('.play').classList.add('display-none')  
            document.querySelector('.pause').classList.remove('display-none')  
            document.querySelector('.total').innerHTML = countTime(audio.duration)  
            timer = setInterval(function()\{  
                // console.log(audio.currentTime)   当前播放时长  
                document.querySelector('.current').innerHTML = countTime(audio.currentTime)  
                document.querySelector('.circle').style.left = ((audio.currentTime / audio.duration) \* 400) + 'px'  
                document.querySelector('.process-played').style.width = ((audio.currentTime / audio.duration) \* 400) + 'px'  
            \},1000)  
        \}  
        function pause () \{  
            audio.pause()  
            clearInterval(timer)  
            document.querySelector('.play').classList.remove('display-none')  
            document.querySelector('.pause').classList.add('display-none')

// 把秒数转换成为 有分钟的时间  
        function countTime (time) \{  
            var minutes = Math.floor(time / 60)  
            var seconds = Math.floor(time % 60) + 1  
            if (seconds < 10) \{  
                seconds = '0' + seconds  //如果秒小于10，前面加个0  
            \}  
            if (minutes < 10) \{  
                minutes = '0' + minutes  //如果分钟小于10，前面加个0  
            \}  
            return minutes + ':' + seconds  
        \}  
  
  
        function start (e) \{  
            document.body.onmousemove = function()\{  
                e = window.event || e  
                move(e)  
            \}

\}     //兼容IE和谷歌、火狐浏览器