基于jquery實現(xiàn)自定義的audio

更新時間：2023年12月20日 08:27:06 作者：一涯

最近接到一個古早的項目變更,設(shè)計的音樂播放的功能是自定義的樣式,對于jquery的項目第一反應(yīng)是先找插件,然而找了半天沒找到,最后只能自己實現(xiàn),文中有詳細的代碼示例供大家參考,需要的朋友可以參考下

預期效果

預期實現(xiàn)功能

自定義實現(xiàn)進度條及進度監(jiān)控
可以手動定位進度
播放（每次只能播放一個，不允許多個同時播放）
暫停

實現(xiàn)方案

1. 進度條

進度條使用<input type="range" />

根據(jù)需求，可使用的屬性如下：

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

但是原生的樣式不符合要求。但是調(diào)整樣式又需要兼容chrome和firefox。

最終的樣式代碼如下：

[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;
}

2.播放

在多個播放器同時存在時，我們需要做到同一個頁面同時播放的只有一個

首先渲染頁面

    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);
    }

其次增加方法

	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. 播放進度監(jiān)控

通過audio的timeupdate事件監(jiān)聽播放進度，并通過duration獲取總的長度。currentTime獲取當前長度。

	$(".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;			
		})
	})

監(jiān)聽事件圖省事挨個添加的。理論上應(yīng)該搞一個事件委托，在父級進行監(jiān)聽。

以上就是基于jquery實現(xiàn)自定義的audio的詳細內(nèi)容，更多關(guān)于jquery自定義的audio的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: