audio进度条（改进）
生活随笔
收集整理的這篇文章主要介紹了
audio进度条（改进）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML5 audio標簽自定義控制器
參照之前的修改下進度條，使進度條更美觀
效果如下
代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>html {font-size: 50px;}body {margin: 0;padding: 0;}.mp3Box {display: flex;justify-content: space-between;align-items: center;/* width: 100%; */height: 1.08rem;border: 1px solid black;padding: 0 0.4rem;}.radioBox {width: 0.6rem;height: 0.6rem;/* border: 1px solid red; */border-radius: 50%;background: url(./bofan.jpg) no-repeat center center;background-size: 0.6rem 0.6rem;}.voice {width: 0.5rem;height: 0.5rem;border-radius: 50%;background: url(./voiceon.jpg) no-repeat center center;background-size: 0.5rem 0.5rem;}#yinliang {display: none;position: relative;top: 0.2rem;left: -2.14rem;}.time {font-size: 0.2rem;-moz-user-select: none;-webkit-user-select: none;user-select: none;}.progress {position: relative;width: 50%;height: 0.08rem;background-color: #ccc;}.slide {position: absolute;top: -0.1rem;width: 0.3rem;height: 0.3rem;border-radius: 50%;background-color: #3299cc;z-index: 9;}.fill{position: absolute;top: 0;height: 0.08rem;background-color: #3299cc;}</style></head><body><div class="mp3Box"><!-- 播放開關 --><div class="radioBox" onclick="bofan()"><audio id="ado"></audio></div><!-- 進度條 --><div class="progress"><div class="slide"></div><div class="fill"></div></div><!-- 時間 --><div class="time"><span class="currentTime">00:00</span> /<span class="duraTime">00:00</span></div><!-- 是否靜音 --><div class="voice"></div></div><script>var audio = document.querySelector("#ado");// 音頻地址audio.src ="http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid=MUSIC_96409423&response=res&type=convert_url&";audio.controls = false;audio.loop = true;audio.volume = 0.3;var rBox = document.querySelector(".radioBox");rBox.appendChild(audio);// 調整聲音是否靜音var voice = document.querySelector(".voice");voice.addEventListener("click", function () {if (audio.muted) {audio.muted = false;voice.style.backgroundImage = "url(./voiceon.jpg)";} else {audio.muted = true;voice.style.backgroundImage = "url(./voiceoff.jpg)";}});// 播放暫停function bofan() {if (audio.paused) {audio.play();rBox.style.backgroundImage = "url(./zanting.jpg)";} else {audio.pause();rBox.style.backgroundImage = "url(./bofan.jpg)";}}// 獲取音頻總時長if (audio != null) {var duration;audio.load();audio.oncanplay = function () {var duraTime = document.querySelector(".duraTime");duraTime.innerHTML = transTime(audio.duration);};}// 格式化時間格式function transTime(time) {let duration = parseInt(time);let minute = parseInt(duration / 60);let sec = (duration % 60) + "";let isM0 = ":";if (minute == 0) {minute = "00";} else if (minute < 10) {minute = "0" + minute;}if (sec.length == 1) {sec = "0" + sec;}return minute + isM0 + sec;}// 時長進度條var progress = document.querySelector(".progress");var slide = document.querySelector(".slide");var fill = document.querySelector(".fill")audio.ontimeupdate = function () {var l = (audio.currentTime / audio.duration) * 100;slide.style.left = l + "%";fill.style.width = l + "%";if (audio.currentTime == 0) {slide.style.left = "0%";}var currentTime = document.querySelector(".currentTime");currentTime.innerHTML = transTime(parseInt(audio.currentTime));var duraTime = document.querySelector(".duraTime");duraTime.innerHTML = transTime(audio.duration);};// 點擊進度條progress.onmousedown = function (e) {var rate = (e.clientX - progress.offsetLeft) / this.clientWidth*audio.durationaudio.currentTime = rate-(progress.clientWidth*0.005)};//進度條拖動slide.onmousedown = function (e) {var x = e.clientX - this.offsetLeft; //240document.onmousemove = function (e) {var jlx = ((e.clientX - x) / progress.clientWidth) * 100;if (jlx <= 100 && jlx >= 0) {slide.style.left = jlx + "%";}audio.currentTime = (jlx / 100) * audio.duration;};document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null;};};slide.ontouchstart = function (e) {var x = e.targetTouches[0].clientX - this.offsetLeft; //240document.ontouchmove = function (e) {var jlx = ((e.targetTouches[0].clientX - x) / progress.clientWidth) * 100;if (jlx <= 100 && jlx >= 0) {slide.style.left = jlx + "%";}audio.currentTime = (jlx / 100) * audio.duration;};document.ontouchend = function (e) {document.ontouchmove = null;document.ontouchend = null;};};</script></body> </html>圖片素材：
總結
以上是生活随笔為你收集整理的audio进度条（改进）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 音乐播放器的歌词同步实现
- 下一篇： 影院购票系统 C#源代码