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

43次阅读

共计 3476 个字符,预计需要花费 9 分钟才能阅读完成。

前言

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

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

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

  • 西瓜播放器
  • Media Element

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

在本文中,咱们将学会:

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

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

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

<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'> 去简略实现进度条。从而能够监听进度条地位,扭转音频地位。反之能够通过监听 audiotimeupdate办法扭转进度条。 这里次要用到的属性和办法为:

  • 属性

    • 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 将其绑定到音频元素以提供必要的性能。

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

正文完
 0