音乐播放器 — 用 vant4 中的滑块自定义播放器进度条

一、运行效果

 

 

 二、代码实现

2.1、HTML：

　　　　<!-- 音频播放器 -->
　　　　<audio ref="audio" src="音乐名称.mp3" id="audio"></audio>

　　　　<!-- 进度条 -->
        <div class="progress">
            <!-- 当前播放时间 -->
            <span>{{ startTime }}</span>
            <van-slider v-model="progressValue" @change="onProgressChange" />
            <!-- 总时间 -->
            <span>{{ endTime }}</span>
        </div>

2.2、JS：

// 获取音乐播放时间
        // 1、音乐总时长
        // 2、音乐正在播放的时间节点
        function addEventHandle(s: any) {
            // 断言，timeupdate 事件在音频/视频（audio/video）的播放位置发生改变时触发。
            (<HTMLAudioElement>document.getElementById("audio")).addEventListener("timeupdate", () => {
                // 1、音乐正在播放的时间节点
                music.currentTime = s.currentTime;

                // 2、音乐总时长
                music.durationTime = s.duration;
                // console.log(s.duration);

                // 进度条，这条公式是进度条progress最大值超出100处理
                progressValue.value = parseInt(s.currentTime) / s.duration * 100;
                
                // 实现显示当前播放时长与总时长：

                //总的秒数转换为分
                let a = Math.floor(music.durationTime / 60);
                //总的秒数转换为秒
                let b = Math.floor(music.durationTime % 60);
                // 秒数补0，如果小于10的话，在秒数前面补0
                let c=b<10?"0"+b:b;
                //拼接然后赋值
                music.endTime = a + "." + c;

                //获取分
                const minute = parseInt((music.currentTime/60).toString());
                //获取秒
                const second = Math.ceil(music.currentTime % 60);
                
                const formatSecond = second > 59 ? 59 : second;
                //用字符模板赋值
                music.startTime = `${minute}:${formatSecond < 10 ? '0' + formatSecond : formatSecond}`;


            })
        }

        // 改变进度条的值
        function onProgressChange(value: any) {
            const s: any = document.getElementById("audio") as HTMLAudioElement

            // 这条公式就是实现点击进度条时，歌曲播放到相应的位置上
            s.currentTime = (s.duration * value) / 100;
            // showToast('当前值：' + value);
        }