自定义H5音频组件

最新推荐文章于 2024-09-13 10:11:04 发布

codezha

最新推荐文章于 2024-09-13 10:11:04 发布

阅读量1k

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/codezha/article/details/104068677

版权

前端专栏收录该内容

63 篇文章 0 订阅

订阅专栏

自定义支持播放/暂停，进度条拖拽，静音/有声音播放的H5音频播放组件，效果图和具体实现代码如下：

在这里插入图片描述

HTML代码

<!DOCTYPE html>
<html lang="en">
<style type="text/css">
    .audio {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .progress-bar-bg {
        width: 40%;
        background-color: #d9d9d9;
        position: relative;
        height: 2px;
        cursor: pointer;
    }

    .progress-bar {
        background-color: #649fec;
        width: 0;
        height: 2px;
    }

    .progress-bar-bg span {
        content: " ";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        background-color: #3e87e8;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -5px;
        margin-left: -5px;
        cursor: pointer;
    }
</style>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"
        name="viewport">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=yes" />
    <title>H5播放音频</title>
</head>

<body>
    <audio src="music.mp3"></audio>
    <div class="audio">
        <image src="./img/play_ic.png" id="audioPlayer" onclick="handlePlay()"></image>
        <span id="currentTime">00:00</span>
        <div class="progress-bar-bg" id="progressBarBg">
            <div class="progress-bar" id="progressBar"></div>
            <span id="progressDot"></span>
        </div>
        <span id="duration">00:00</span>
        <image src="./img/voice_ic.png" id="MutePlayer" onclick="handleMute()"></image>
</div>
</body>
</html>

DOM元素获取

var audio = document.getElementsByTagName("audio")[0];
var isPlay = false;
var isMute = false;
var audioPlayer = document.getElementById("audioPlayer")
var MutePlayer = document.getElementById("MutePlayer")
var progressBarBg = document.getElementById("progressBarBg")
var progressDot = document.getElementById("progressDot")
var currentTime = document.getElementById("currentTime")
var duration = document.getElementById("duration")

播放/暂停

//   音频操作函数
function handlePlay() {
    if (audio.paused) {
        // 开始
        audioPlayer.src = './img/suspend_ic.png';
        audio.play();
        duration.innerHTML = transTime(audio.duration);
    } else {
        // 暂停
        audioPlayer.src = './img/play_ic.png';
        audio.pause();
    }
}

进度条操作

//   音频播放进度实时监听事件
audio.addEventListener('timeupdate', function () {
    updateProgress();
}, false);
//   进度条更新方法
function updateProgress() {
    var value = audio.currentTime / audio.duration;
    document.getElementById("progressBar").style.width = value * 100 + '%';
    document.getElementById("progressDot").style.left = value * 100 + '%';
    currentTime.innerHTML = transTime(audio.currentTime);
}
//   进度条点击事件
progressBarBg.onmousedown = function (e) {
    if (!audio.paused || audio.currentTime !== 0) {
        var pgsWidth = progressBarBg.clientWidth || progressBarBg.offsetWidth;
        var rate = e.offsetX / pgsWidth;
        audio.currentTime = audio.duration * rate;
        updateProgress();
    }
}
//   进度条拖拽事件
progressDot.addEventListener('touchstart', function (e) {
    if (!audio.paused || audio.currentTime !== 0) {
        var totalLength = progressBarBg.offsetWidth;
        var prevX = e.touches[0].clientX - progressDot.offsetLeft;
        document.addEventListener('touchmove', fnMove, false);
        document.addEventListener('touchend', fnEnd, false);
        function fnMove(e) {
            var difference = e.targetTouches[0].clientX - prevX;
            if (difference >= totalLength) {
                difference = totalLength;
            } else if (difference <= 0) {
                difference = 0;
            }
            var rate = difference / totalLength;
            audio.currentTime = audio.duration * rate;
            updateProgress();
        }
        function fnEnd(e) {
            document.removeEventListener('touchmove', fnMove, false);
            document.removeEventListener('touchend', fnEnd, false);
        }
    }
}, false);

静音

 //   音量操作函数
 function handleMute() {
     if (audio.muted) {
         //   取消静音
         MutePlayer.src = './img/voice_ic.png';
         audio.muted = false;
     } else {
         //   静音
         MutePlayer.src = './img/mute_ic.png';
         audio.muted = true;
     }
 }

其他

// 监听播放完成事件
audio.addEventListener('ended', function () {
    audioEnded();
}, false);

/**
* 播放完成时把进度调回开始的位置
*/
function audioEnded() {
    document.getElementById("progressBar").width = 0;
    document.getElementById("progressDot").left = 0;
    audioPlayer.src = './img/play_ic.png';
}
/**
* 音频播放时间换算
* @param {number} value - 音频当前播放时间，单位秒
*/
function transTime(value) {
    if (!value) {
        return '00:00'
    }
    var time = "";
    var h = parseInt(value / 3600);
    value %= 3600;
    var m = parseInt(value / 60);
    var s = parseInt(value % 60);
    if (h > 0) {
        time = formatTime(h + ":" + m + ":" + s);
    } else {
        time = formatTime(m + ":" + s);
    }
    return time;
}
/**
* 格式化时间显示，补零对齐
* eg：2:4  -->  02:04
* @param {string} value - 形如 h:m:s 的字符串 
*/
function formatTime(value) {
   if (!value) {
       return ''
   }
   var time = "";
   var s = value.split(':');
   var i = 0;
   for (; i < s.length - 1; i++) {
       time += s[i].length == 1 ? ("0" + s[i]) : s[i];
       time += ":";
   }
   time += s[i].length == 1 ? ("0" + s[i]) : s[i];
   return time;
 }