1、vue-audio-better
源碼及Demo
個(gè)人建議將源碼下載下來(lái)，修改源碼（包括界面功能按鈕分布，方法調(diào)用等）使用。
1.1 示例
Normal
Mini
1.2 安裝
npm install vue-audio-better --save
1.3 使用
Normal
<vue-audio
audio-source="https://example.com/example.mp3"
></vue-audio>
Mini
<mini-audio
audio-source="https://example.com/example.mp3"
></mini-audio>
1.4 參數(shù)
| 名稱 | 類型 | 默認(rèn)值 | 備注 | 是否必選 |
|---|---|---|---|---|
| width | Number | 500 | 音頻組件寬度 | |
| audio-source | String | 音頻文件URL地址 | 是 | |
| html5 | Boolean | false | 是否強(qiáng)制使用html5音頻 | |
| loop | Boolean | false | 播放結(jié)束后是否自動(dòng)重新開(kāi)始播放 | |
| preload | Boolean | true | 組件掛載時(shí)是否開(kāi)始下載音頻文件 | |
| autoplay | Boolean | false | 組件掛載時(shí)是否開(kāi)始播放 | |
| formats | String[] | [] | Howler.js 會(huì)自動(dòng)從擴(kuò)展中檢測(cè)您的文件格式，但您也可以在無(wú)法提取的情況下指定格式（例如使用 SoundCloud 流） | |
| xhrWithCredentials | Boolean | false | withCredentials使用 Web Audio API 時(shí)是否在用于獲取音頻文件的 XHR 請(qǐng)求上啟用標(biāo)志（請(qǐng)參閱參考資料） |
1.5 組件內(nèi)部數(shù)據(jù)
| 名稱 | 類型 | 默認(rèn)值 | 備注 | 是否必選 |
|---|---|---|---|---|
| playing | Boolean | 當(dāng)前是否正在播放音頻 | ||
| muted | Boolean | 音頻播放是否靜音 | ||
| volume | Number | 播放的音量0到1 | ||
| rate | Number | 播放的速度范圍從0.5-4 | ||
| seek | Number | 播放位置 | ||
| duration | Number | 音頻的持續(xù)時(shí)間 | ||
| progress | Number | 播放進(jìn)度0-1 |
組件內(nèi)部數(shù)據(jù)，可以通過(guò)組件直接控制，也可以修改源碼更改默認(rèn)值。
1.6 方法
| 名稱 | 參數(shù) | 備注 |
|---|---|---|
| play | 無(wú) | 播放 |
| pause | 無(wú) | 暫停播放 |
| togglePlayback | 無(wú) | 切換播放或暫停播放 |
| stop | 無(wú) | 停止播放 |
| mute | 無(wú) | 靜音播放 |
| unmute | 無(wú) | 取消靜音播放 |
| toggleMute | 無(wú) | 切換靜音和取消靜音播放 |
| setVolume(volume) | volume | 設(shè)置播放音量（值介于0-1之間） |
| setRate(rate) | rate | 設(shè)置播放的速率（速度）（值介于0.5-4之間） |
| setSeek(seek) | seek | 設(shè)置播放的位置（值在0和duration之間） |
| setProgress(progress) | progress | 設(shè)置播放進(jìn)度（值在0-1之間） |
2、vue-audio-visual
源碼及Demo
<av-line
:line-width="2"
line-color="lime"
audio-src="/static/music.mp3"
></av-line>
<av-bars
caps-color="#FFF"
:bar-color="['#f00', '#ff0', '#0f0']"
canv-fill-color="#000"
:caps-height="2"
audio-src="/static/bach.mp3"
></av-bars>
<av-circle
:outline-width="0"
:progress-width="5"
:outline-meter-space="5"
:playtime="true"
playtime-font="18px Monaco"
audio-src="/static/bach.mp3"
></av-circle>
<av-waveform
audio-src="/static/bar.mp3"
></av-waveform>
<av-media
:media="mediaObject"
></av-media>
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-779652.html
2.1 安裝
npm install --save vue-audio-visual
2.2 引用
import Vue from 'vue'
import AudioVisual from 'vue-audio-visual'
Vue.use(AudioVisual)
2.3 使用
<av-bars
audio-src="/static/bach.mp3">
</av-bars>
2.4 參考
1）源碼API文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-779652.html
到了這里，關(guān)于【Vue-Element】好用的音頻組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
