前言

咱们在 Web 开发过程中，有很多用到音频元素audio的场景，如音乐播放器、语音播放等性能，然而因为原生组件有以下毛病：

  • 原生UI款式丑，在谋求好看的页面中须要重写元素款式，而且反对重写的款式不多。
  • 浏览器兼容问题，不同浏览器的音频元素展现不同。

因为以上两个问题，这就导致咱们须要对原生的audio进行批改时比拟艰难。而对于大多数音频的需要，咱们能够应用满足咱们要求的第三方组件库中抉择，如：

  • 西瓜播放器
  • Media Element

而对于 UI 有要求的需要，比方音乐播放器的需要，那就要遵循整个页面的 UI 主题，这种状况下咱们就须要自定义编写一个音频组件了。

在本文中，咱们将学会：

  1. 如何批改音频元素的默认款式
  2. 如何重写音频自定义款式

如何批改音频元素的默认款式

默认状况下，音频元素不可见。须要增加控件属性以使其控件可见。

<audio controls="true" src="音频.mp3" ></audio>

音频元素在CSS中具备以下伪元素选择器：

audio::-webkit-media-controls-panelaudio::-webkit-media-controls-mute-buttonaudio::-webkit-media-controls-play-buttonaudio::-webkit-media-controls-timeline-containeraudio::-webkit-media-controls-current-time-displayaudio::-webkit-media-controls-time-remaining-displayaudio::-webkit-media-controls-timelineaudio::-webkit-media-controls-volume-slider-containeraudio::-webkit-media-controls-volume-slideraudio::-webkit-media-controls-seek-back-buttonaudio::-webkit-media-controls-seek-forward-buttonaudio::-webkit-media-controls-fullscreen-buttonaudio::-webkit-media-controls-rewind-buttonaudio::-webkit-media-controls-return-to-realtime-buttonaudio::-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>

  • 办法

    • play()-播放
    • pause()-暂停
    • ended()-播放完结
    • timeupdate()-音频地位变动

具体参考 MDN-audio

还有对于进度条的扭转，能够通过<input type='range'>去简略实现进度条。从而能够监听进度条地位，扭转音频地位。反之能够通过监听audio的timeupdate办法扭转进度条。 这里次要用到的属性和办法为：

  • 属性

    • value-以后进度<number>

  • 办法

    • 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. 监听音频按钮变动，并设置对应的状态（是否静音）和iconsoundButton.addEventListener("click", ()=>{  audio.muted = !audio.muted;  soundButton.innerHTML = audio.muted ? muteIcon : soundIcon;});

代码片段

论断

应用伪元素选择器，您能够对音频元素进行简略的设计更改。

对于更简单的设计更改，最好实现自定义音频播放器，而后应用 Javascript 将其绑定到音频元素以提供必要的性能。

到这里，根本就学会了自定义音频播放器了，心愿大家能有所播种。