H5 Audio ES6版 系列教程之一

js 實現原生 Audio 初探版

不再用擔憂面試問到H5用到哪些新元素了，大神如我 小弟用js原生實現了 抄了 Audio，Video還會遠嗎?

本項目基於 ES6+scss+webpack 開發的原生 JS 版 H5 Audio ，這次分享的目的是讓前端對 H5 的 Audio 有更深的瞭解，同時對現代前端技術也有個大體的瞭解，最終能夠基於 vue 或 react 開發一個 H5 版的 網易音樂，QQ 音樂...

因爲工做中有音頻方面的需求，因此該項目也是本身做爲迭代的記錄。意味着，這將是一個系列教程。

預覽地址，訪問可能會比較慢。 gitHub地址

教程

實現原生音頻無外乎兩個部分

• UI
• Event

首先要先了解 Aduio 的屬性和方法。

關於 Audio 元素的介紹，推薦 MDN

• 屬性
• 方法

UI

首先原生 audio 元素是必不可少的，咱們也能夠直接添加 controls 屬性來使用瀏覽器實現的 UI。

<audio id="myaudio" src="/static/test.mp3" controls></audio>
複製代碼

基礎的 DOM 結構應該包括：

• 播放按鈕
• 進度條
• 聲音控制
• 當前時間/總時長

整體結構建議使用語義化元素，樣式類名命名參考BEM。音頻建議考慮 視覺障礙者 ，可引入 無障礙

這邊簡單講一下進度條的實現。經過 input 類型中 range 和 progress 能夠大大下降 DOM 結構複雜度及提升語義化。

其中涉及到改瀏覽器原生樣式讀者可自行谷歌。也能夠參考本項目源碼

<div class="myaudio__controls">
    <button type="button" data-myaudio="play"></button>
    <span class="myaudio__progress">
        <input class="myaudio__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-myaudio="seek">
        <progress class="myaudio__progress--played" max="100" value="0" role="presentation"></progress>
        <progress class="myaudio__progress--buffer" max="100" value="20.43"></progress>
    </span>
    <span class="myaudio__time--current">00:00</span>
    <span class="myaudio__time--duration">00:20</span>

    <button type="button" data-myaudio="mute"></button>

    <span class="myaudio__volume">
        <input class="myaudio__volume--input" type="range" min="0" max="10" value="10" data-myaudio="volume">
        <progress class="myaudio__volume--display" max="10" value="10" role="presentation">
        </progress>
    </span>
</div>
複製代碼

Event

事件與 DOM 元素密不可分，而音頻主要分兩個方向去監聽事件。用戶自定義的 DOM 元素事件監聽，Audio 原生事件監聽。涉及的知識點是 addEventListenter 和 自定義事件。

本次 Audio 插件基於 Es6 的 class 開發。最終能夠直接經過 實例化來生成一個 audio 對象

咱們先從配置文件來大體瞭解下開發一個 Audio 所用到的配置項。

export default {
  // 配置對應功能
  controls: ['play', 'progress', 'current-time', 'duration', 'mute', 'volume'],

  // 基於iconfont，SVG版，如需替換圖片，
  // 可直接導入本身的iconfont文件，修改對應圖片類名便可
  icon: {
    play: 'icon-bofang',
    pause: 'icon-bofangzanting',
    muted: 'icon-jingyin',
    volume: 'icon-shengyin'
  },

  // 配置是否自動播放
  autoplay: false,

  // 聲音控制相關
  volumeMin: 0,
  volumeMax: 10,
  volume: 10,

  // 播放器HTML結構
  html: '',

  // Debugger 相關
  logPrefix: '日誌：',
  debug: true,

  // 總體思路是經過控制全局狀態類名，來設置對應樣式
  classes: {
    setup: 'myaudio--setup',
    ready: 'myaudio--ready',
    stopped: 'myaudio--stopped',
    playing: 'myaudio--playing',
    muted: 'myaudio--muted',
    loading: 'myaudio--loading',
    hover: 'myaudio--hover',
    isIos: 'myaudio--is-ios',
    isTouch: 'myaudio--is-touch'
  },

  // 狀態保存相關
  storage: {
    enabled: true,
    key: 'myaudio'
  },

  // 選擇器相關
  selectors: {
    container: '.myaudio',
    controls: {
      container: null,
      wrapper: '.myaudio__controls'
    },
    labels: '[data-myaudio]',
    buttons: {
      seek: '[data-myaudio="seek"]',
      play: '[data-myaudio="play"]',
      pause: '[data-myaudio="pause"]',
      mute: '[data-myaudio="mute"]'
    },
    volume: {
      input: '[data-myaudio="volume"]',
      display: '.myaudio__volume--display'
    },
    progress: {
      container: '.myaudio__progress',
      buffer: '.myaudio__progress--buffer',
      played: '.myaudio__progress--played'
    },
    currentTime: '.myaudio__time--current',
    duration: '.myaudio__time--duration'
  },

  // 主要功能涉及如下 5 個事件
  // 事件相關
  listeners: {
    seek: null,
    play: null,
    pause: null,
    mute: null,
    volume: null
  }
};
複製代碼

從配置文件能夠大概瞭解整體思路。下次分享將從源碼解析的角度進一步講解 Audio 原生實現。

其餘分享

如下推薦閱讀，讀者可選讀：

• 如何用 vue 開發簡易版流程圖 附源碼
• 如何提高碼字效率
• 如何自動生成前端 API 文檔
• 如何配置標配的 webpack 工程化項目

快速運行

在前端的世界裏，所碼即所得。當我想要了解一個項目的時候，我會直接運行看效果。

接下來，假設你已經具有必定的前端工程化開發經驗。

cd ~/Desktop
git clone https://github.com/leer0911/myAudio.git
cd myAudio
npm i
npm run dev
複製代碼

參考

感謝 plyr，能夠說本教程是對它的一次源碼解析。