共计 3476 个字符,预计需要花费 9 分钟才能阅读完成。
前言
咱们在 Web 开发过程中,有很多用到音频元素 audio
的场景,如音乐播放器、语音播放等性能,然而因为原生组件有以下毛病:
- 原生 UI 款式丑,在谋求好看的页面中须要重写元素款式,而且反对重写的款式不多。
- 浏览器兼容问题,不同浏览器的音频元素展现不同。
因为以上两个问题,这就导致咱们须要对原生的 audio
进行批改时比拟艰难。而对于大多数音频的需要,咱们能够应用满足咱们要求的第三方组件库中抉择,如:
- 西瓜播放器
- Media Element
而对于 UI 有要求的需要,比方音乐播放器的需要,那就要遵循整个页面的 UI 主题,这种状况下咱们就须要自定义编写一个音频组件了。
在本文中,咱们将学会:
- 如何批改音频元素的默认款式
- 如何重写音频自定义款式
如何批改音频元素的默认款式
默认状况下,音频元素不可见。须要增加控件属性以使其控件可见。
<audio controls="true" src="音频.mp3" ></audio>
音频元素在 CSS 中具备以下伪元素选择器:
audio::-webkit-media-controls-panel
audio::-webkit-media-controls-mute-button
audio::-webkit-media-controls-play-button
audio::-webkit-media-controls-timeline-container
audio::-webkit-media-controls-current-time-display
audio::-webkit-media-controls-time-remaining-display
audio::-webkit-media-controls-timeline
audio::-webkit-media-controls-volume-slider-container
audio::-webkit-media-controls-volume-slider
audio::-webkit-media-controls-seek-back-button
audio::-webkit-media-controls-seek-forward-button
audio::-webkit-media-controls-fullscreen-button
audio::-webkit-media-controls-rewind-button
audio::-webkit-media-controls-return-to-realtime-button
audio::-webkit-media-controls-toggle-closed-captions-button
这写伪类选择器,能够扭转音频元素的根本款式,然而仅在 Chrome 浏览器下无效。
我把所有的伪类都给上不同的背景色彩,最初出现的成果如下图所示:
audio::-webkit-media-controls-xxx{background-color: 色彩随机;}
也就是,只能批改局部款式,没有提供更粗疏的批改。
如果想要设置进度条的色彩,根本只能自定义重写播放器了。
自定义音频播放器
接下来,将是咱们本文的重点,咱们将创立本人的自定义音频播放器。
咱们自定义的播放器,它应用不同的元素来实现控件的 UI。而后在 Javascript 的帮忙下将音频元素的性能绑定到这些元素。
首先咱们先写一个简略的布局
<div id="audio-player">
<audio src="xx.mp3" style="display: none" ></audio><!--audio 播放器,暗藏掉 -->
<div class="poster"> <img src='xx.png'/></div><!-- 封面图 -->
<div class="controls">
<div class="poster"> 音乐播放器 </div>
<div class="controls-con">
<button class="player-button"> <!-- 播放暂停按钮图片 --> </button>
<input type="range" class="timeline" max="100" value="0" /><!-- 进度条 应用 input[ragne]实现 -->
<button class="sound-button"> <!-- 音量开关按钮图片 --></button>
</div>
</div>
</div>
咱们首先创立了一个 audio
元素,然而不须要它显示,只须要它的音频性能,也不须要它的 UI。而后咱们自定义播放器的封面图、控件等 UI 元素,款式能够本人调整,就不放 CSS 了,我调整后显示后果大略是这样。
而后咱们如何将本人定义的元素控件去作用于这个 audio
元素呢?这就须要用到它的一些属性和办法了,如:
-
属性
- currentTime- 以后音频的播放地位
<string>
- duration- 音频的播放总长度
<string>
- muted- 是否静音
<boolean>
- currentTime- 以后音频的播放地位
-
办法
- play()- 播放
- pause()- 暂停
- ended()- 播放完结
- timeupdate()- 音频地位变动
具体参考 MDN-audio
还有对于进度条的扭转,能够通过 <input type='range'>
去简略实现进度条。从而能够监听进度条地位,扭转音频地位。反之能够通过监听 audio
的timeupdate
办法扭转进度条。 这里次要用到的属性和办法为:
-
属性
- value- 以后进度
<number>
- value- 以后进度
-
办法
- change- 进度条扭转
说到这,大家也就应该明确了,咱们利用原有的 audio
的办法和属性去实现本人的 UI 控件,这其实也是风行音频组件库的做法。
上面间接看音频控件的 javaScript 代码:
const playerButton = document.querySelector(".player-button"),// 获取播放 / 暂停按钮
audio = document.querySelector("audio"),// 获取音频
timeline = document.querySelector(".timeline"),// 获取进度条
soundButton = document.querySelector(".sound-button"),// 过来音量按钮(是否静音)// 1. 通过监听按钮的点击工夫,批改音频的播放、暂停状态,并设置对应的 icon.
playerButton.addEventListener("click", ()=> {if (audio.paused) {audio.play();
playerButton.innerHTML = pauseIcon;
} else {audio.pause();
playerButton.innerHTML = playIcon;
}
});
// 2. 通过监听音频播放的进度设置 input 进度条的 value.
audio.ontimeupdate=()=> {const percentagePosition = (100 * audio.currentTime) / audio.duration;
timeline.style.backgroundSize = `${percentagePosition}% 100%`;
timeline.value = percentagePosition;
}
// 3. 如果播放完结,将播放按钮重置为暂停状态。audio.onended = audioEnded=()=>{playerButton.innerHTML = playIcon;}
// 4. 监听进度条变动,并设置音频地位。timeline.addEventListener("change", ()=>{const time = (timeline.value * audio.duration) / 100;
audio.currentTime = time;
});
// 5. 监听音频按钮变动,并设置对应的状态(是否静音)和 icon
soundButton.addEventListener("click", ()=>{
audio.muted = !audio.muted;
soundButton.innerHTML = audio.muted ? muteIcon : soundIcon;
});
代码片段
论断
应用伪元素选择器,您能够对音频元素进行简略的设计更改。
对于更简单的设计更改,最好实现自定义音频播放器,而后应用 Javascript 将其绑定到音频元素以提供必要的性能。
到这里,根本就学会了自定义音频播放器了,心愿大家能有所播种。