jquery实现自定义的audio

最近接到一个古早的项目变更。设计的音乐播放的功能是自定义的样式。对于jquery的项目第一反应是先找插件。然而找了半天没找到。最后只能自己实现。

预期效果

预期实现功能

  • 自定义实现进度条及进度监控
  • 可以手动定位进度
  • 播放(每次只能播放一个,不允许多个同时播放)
  • 暂停

实现方案

1. 进度条

进度条使用<input type="range" />

根据需求,可使用的属性如下:

js 复制代码
<input 
    onchange="playTime(${element.id}, this)" 
    id="progress_${element.id}" 
    value="0" 
    type="range" 
    min="0" 
    max="100" 
    step="0" 
 />

但是原生的样式不符合要求。但是调整样式又需要兼容chrome和firefox。

调整样式参考文档1文档2

最终的样式代码如下:

css 复制代码
[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    width: 22.125rem;
}
[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: #eee;
}
[type="range"]::-moz-range-track {
    height: 4px;
    background: #eee;
}
[type="range" i]::-webkit-slider-container {
    height: 10px;
    overflow: hidden;
}
[type="range" i]::-moz-range-progress {
    height: 10px;
    overflow: hidden;
}
input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: #B32B2B;
    border: 1px solid transparent;
    margin-top: -1px;
}
input[type="range"]::-moz-range-progress {
    background-color: #B32B2B;
    height: 4px;
}
[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #B32B2B;
    border: 1px solid transparent;
    border-image: linear-gradient(#B32B2B,#B32B2B) 0 fill / 0 2 0 0 / 0px 0px 0 2000px;
}

播放

在多个播放器同时存在时,我们需要做到同一个页面同时播放的只有一个

首先渲染页面

js 复制代码
    function musicList(id, index) {
            let str = "";
            musics?.slice(index, index + 10)?.forEach(element => {
                str += `<div>
                        <div class="swiper-img-item">
                                <img src="./images/top.png" />
                                <div>${element.title}</div>
                                <audio class="topAudio" id="top_audio_${element.id}" src=${element.url}  />
                                <img onclick="topPlay(${element.id})" id="top_play_${element.id}" class="second" src="./images/top_play.svg" />
                                <img onclick="topPause(${element.id})" style="display: none;" id="top_pause_${element.id}" class="second" src="./images/top_off.svg" />
                        </div>
                </div>`
            })
            $(`#${id}`).find(".wrapper").append(str);
    }

其次增加方法

js 复制代码
	function play(id) {
		$("audio").each(function() {
			var itemPlayId = $(this).attr("id")?.replace("audio", "play");
			var itemPauseId = $(this).attr("id")?.replace("audio", "pause");
			if ($(this).attr("id") != ("top_audio_"+id)) {			
				$(this).get(0).pause();
				$("#"+itemPauseId).hide();
				$("#"+itemPlayId).show();
			} else {
				$(this).get(0).play();
				$("#"+itemPauseId).show();
				$("#"+itemPlayId).hide();
			}
		})
	}

3. 播放进度监控

通过audio的timeupdate事件监听播放进度,并通过duration获取总的长度。currentTime获取当前长度。

js 复制代码
	$(".musicAudio").each(function() {
		var that = $(this);
		var audio = that.get(0);
		audio.addEventListener("timeupdate", event => {
			var id = that.attr("id").split("_").reverse()[0];
			var curTime = dayjs(audio.currentTime*1000).format("mm:ss");
			var duration = dayjs(audio.duration*1000).format("mm:ss");
			$(`#time_${id}`).html(`${curTime}/${duration}`)
			$(`#progress_${id}`).get(0).value = (audio.currentTime*1000/(audio.duration*1000))*100;			
		})
	})

监听事件图省事挨个添加的。理论上应该搞一个事件委托,在父级进行监听。

相关推荐
因吹斯汀6 分钟前
一饭封神:当AI厨神遇上你的冰箱,八大菜系大师在线battle!
前端·vue.js·ai编程
再学一点就睡10 分钟前
NATAPP 内网穿透指南:让本地项目轻松 “走出去”
前端
拜无忧10 分钟前
2025最新React项目架构指南:从零到一,为前端小白打造
前端·react.js·typescript
稻草人不怕疼12 分钟前
记一次从“按钮点不动”到“窗口派发缺失”的排查过程
前端
irving同学4623830 分钟前
TypeORM 列装饰器完整总结
前端·后端·nestjs
彭于晏爱编程33 分钟前
你真的了解 Map、Set 嘛
前端
崔璨37 分钟前
详解Vue3的响应式系统
前端·vue.js
摸鱼的鱼lv37 分钟前
🔥 Vue.js组件通信全攻略:从父子传值到全局状态管理,一篇搞定所有场景!🚀
前端·vue.js
IT_陈寒1 小时前
Java性能优化:10个让你的Spring Boot应用提速300%的隐藏技巧
前端·人工智能·后端
whysqwhw1 小时前
Hippy 跨平台框架扩展原生自定义组件的完整实现方案对比
前端