关于javascript:编写属于自己的音乐播放器

6次阅读

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

代码片段

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

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

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

正文完