動手封裝audiocontext，正式命名爲mplayer，能夠經過npm引入了

MPlayer

您能夠查看動手封裝AudioContext

如今正是命名爲MPlayer，參考QMplayer的api，在原來的基礎上添加幾個api

• on / off / emit 方法
• playPrev / playNext 方法
• toggle 方法
• resource 能夠解析數組

使用use

引入mplayer

npm i @hans000/media-player -S

https://cdn.jsdelivr.net/npm/@hans000/media-player@0.2.1/dist/index.js
複製代碼

示例demo

npm安裝

npm i -S @hans000/media-player
import MPlayer from '@hans000/media-player'
複製代碼

CDN引入

<script src="https://cdn.jsdelivr.net/npm/@hans000/media-player@0.2.2/dist/mplayer.js"></script>

// 掛載MPlayer構造函數
複製代碼

初始化

new MPlayer('./1.mp3').onload = function() {
	// ...code
}
複製代碼

new MPlayer(resource, options)
複製代碼

resouce：能夠傳出一個url string、一個ArrayBuffer或者值爲url string的數組

options：一個對象，配置參數以下

• loop：boolean類型，是否循環播放，默認爲false
• volume：number類型，0~1，控制音量，默認爲1
• auto：boolean類型，加載完成後自動播放，默認true
• index：number類型，設置從哪一首開發播放，默認0，從即第1首開始
• analyser：boolean | object類型，是否開啓音頻分析，使用默認設置能夠設爲true；也能夠是一個對象，size用於配置fftSize，默認1024

let player = new MPlayer(resource, {
  loop: false,
  volume: 0.6,
  auto: false,
  analyser: {
    size: 512
  }
})
player.onload = function() {
	this.play()
}
複製代碼

事件綁定

// 初始化時設置
let player = new MPlayer('./1.mp3')

// 添加事件監聽方法，會覆蓋以前用該方式綁定的監聽方法
player.onload = function () { ... }

// 添加事件監聽方法，會保留該事件的其餘監聽方法，可同時設置多個事件
player.on('load', function () { ... })
複製代碼

取消監聽

// 解除事件綁定
player.off('load', fn)

// 解除某事件下全部監聽綁定
player.off('load')
複製代碼

API

屬性 props

• duration 獲取音頻總時長number
• state 獲取當前音頻的狀態，running | suspend
• volume 獲取當前音量number
• loop 獲取音頻是否循環boolean
• auto 是否自動播放boolean

方法 methods

• on(type, fn) 綁定事件，type可選值（load | ended），fn回調函數
• off(type, fn) 解綁事件，type可選值（load | ended），fn回調函數
• emit(type) 手動觸發監聽事件
• getData 獲取分析的音頻數據，類型Uint8Array，須要開啓analyser選項
• play 播放音頻
• pause 暫停播放
• toggle 音頻狀態切換
• playPrev 播放上一首
• playNext 播放下一首
• start(offset) 設置音頻開始播放的時刻，offset的範圍爲0~duration
• setLoop(bool) 設置音頻是否循環播放
• setVolume(val) 設置音頻音量，0 ~ 1.0
• getCurrentTime 獲取當前播放的時長
• setOptions(options) 能夠統一設置，如：{ loop: true, volume: 0.5 }

事件 events

• onload：音頻解析完成時觸發

• onended：音頻播放完觸發

github

MPlayer

License

MIT