音樂吧 - www.n378blcu.icu

 找回密碼
 注冊

掃一掃,訪問微社區

QQ登錄

只需一步,快速開始

查看: 494|回復: 0

Web Audio的音頻播放器插件wavesurfer

[復制鏈接]

1017

主題

1028

帖子

9240

積分

管理員

Rank: 9Rank: 9Rank: 9

音樂幣
102
貢獻
519
金錢
3369
威望
2111
相冊
1

推廣達人宣傳達人突出貢獻榮譽管理最佳新人活躍會員

QQ
跳轉到指定樓層
樓主
發表于 2017-11-8 00:01:29 | 只看該作者 |只看大圖 回帖獎勵 |倒序瀏覽 |閱讀模式

馬上注冊,結交更多好友,享用更多功能,讓你輕松玩轉社區。

您需要 登錄 才可以下載或查看,沒有帳號?注冊

x
基于HTML5 canvas和Web Audio的音頻播放器插件
簡要教程

wavesurfer.js是一款基于HTML5 canvas和Web Audio的音頻播放器插件。通過wavesurfer.js你可以使用它來制作各種HTML5音頻播放器,它可以在各種支持 Web Audio 的瀏覽器中工作,包括 Firefox, Chrome, Safari, Mobile Safari 和 Opera瀏覽器。

Web Audio的音頻播放器插件wavesurfer

使用方法
創建實例對象:



  1. var wavesurfer = Object.create(WaveSurfer);     
復制代碼


通過一個容器對象來初始化:
  1. wavesurfer.init({
  2.     container: '#wave',
  3.     waveColor: 'violet',
  4.     progressColor: 'purple'
  5. });   
復制代碼


調用事件:
  1. wavesurfer.on('ready', function () {
  2.     wavesurfer.play();
  3. });
復制代碼


通過URL調用一個audio文件:
  1. wavesurfer.load('example/media/demo.wav');      
復制代碼


配置參數[td]
參數類型默認值描述
audioContextstringnull使用以前初始化的AudioContext或留空。
audioRatefloat1播放音頻的速度,數值越小越慢。
backendstringWebAudioWebAudio或AudioElement。多數情況下你不用手動設置該參數。AudioElement是在瀏覽器不支持時的一個回退。
containermixednone用于繪制waveform的HTML元素的CSS選擇器。這個參數為必寫參數。
cursorColorstring#333音頻線頭部的光標指示的顏色。
cursorWidthinteger1單位像素。
fillParentbooleantrue是否填充容器或只是通過minPxPerSec來適應容器。
heightinteger128waveform的高度,單位像素。
hideScrollbarbooleanfalse是否顯示水平滾動條。
interactbooleantrue初始化時是否可以使用鼠標來交互。你可以在后面隨時修改該參數。
minPxPerSecinteger50Minimum number of pixels per second of audio.
pixelRatiointegerwindow.devicePixelRatio設置為1可以更快的渲染。
progressColorstring#555The fill color of the part of the waveform behind the cursor.
scrollParentbooleanfalseWhether to scroll the container with a lengthy waveform. Otherwise the waveform is shrunk to the container width
skipLengthfloat2skipForward()和skipBackward()方法每秒鐘skip的數量。
waveColorstring#999The fill color of the waveform after the cursor.

方法
所有的方法都是公開的,下面是一些常用的方法:
  • init(options):使用上面的參數來初始化。
  • destroy():移除事件和元素,并斷開Web Audio的節點。
  • empty():當調用一個0長度的音頻文件將清空waveform。
  • getCurrentTime():以秒為單位返回當前的進度。
  • getDuration():以秒為單位返回當前的audio clip持續時間。
  • load(url):通過XHR從URL上調用音頻文件。返回XHR對象。
  • loadBlob(url):從Blob或file對象中調用音頻文件。
  • on(eventName, callback):綁定一個事件。看后面的事件描述。
  • un(eventName, callback):解綁一個事件。
  • unAll():解綁所有的事件。
  • pause():暫停播放。
  • play([start[, end]]):從當前位置開始播放音頻文件。結合使用start和end可以指定一個音頻播放范圍。
  • playPause():如果當前為狀態狀態開始播放,反之暫停播放。
  • seekAndCenter(progress):Seeks to a progress and centers view [0..1] (0 = beginning, 1 = end).
  • seekTo(progress: Seeks to a progress [0..1] (0=beginning, 1=end).
  • setFilter(filters):For inserting your own WebAudio nodes into the graph.
  • setPlaybackRate(rate):設置重放的速度。(0.5 is half speed, 1 is normal speed, 2 is double speed and so on).
  • setVolume(newVolume):靜重放的音量設置為一個新值[0..1]。(0 = silent, 1 = maximum)
  • skip(offset):Skip a number of seconds from the current position (use a negative value to go backwards).
  • skipBackward():倒退skipLength秒。
  • skipForward():前進skipLength秒。
  • stop():停止音頻文件的播放并回到音頻文件的開始處。
  • toggleMute():音量切換開或者關。
  • toggleInteraction():切換鼠標的交互作用。
  • toggleScroll():切換scrollParent。
Connecting Filters
你可以使用setFilter()方法在graph中插入你自己的Web Audio節點:
  1. var lowpass = wavesurfer.backend.ac.createBiquadFilter();
  2. wavesurfer.backend.setFilter(lowpass);  
復制代碼


事件
WaveSurfer音頻播放器的常用事件有:
  • error :發生錯誤時觸發。回調函數接收一個錯誤信息字符串。
  • finish:音頻文件播放結束時觸發。
  • loading:在通過XHR或拖拽文件時不斷觸發。回調函數接收一個百分比的加載進度[1..100]和一個事件對象。
  • mouseup:當松開一個鼠標按鍵時觸發。回調函數接收MouseEvent對象。
  • pause:音頻播放器暫停時觸發
  • play:音頻播放器處于播放狀態時觸發。
  • ready:當音頻文件被調用,解碼完成,并且waveform已經繪制完成后觸發。
  • scroll:當滾動條被移動時觸發。回調函數接收一個ScrollEvent對象。
  • seek:當seek時觸發。回調函數接收一個浮點數的進度[0..1]。
Region events(通過Regions插件使用)
  • region-in:當回放進入某個區域時觸發。回調函數接收一個Region對象。
  • region-out:當回放離開某個區域時觸發。回調函數接收一個Region對象。
  • region-mouseenter:當鼠標移入某個區域時觸發。回調函數接收一個Region對象和一個MouseEvent對象。
  • region-mouseleave:當鼠標離開某個區域時觸發。回調函數接收一個Region對象和一個MouseEvent對象。
  • region-click:當鼠標在某個區域內點擊時觸發。回調函數接收一個Region對象和一個MouseEvent對象。
  • region-dblclick:當鼠標在某個區域內雙擊時觸發。回調函數接收一個Region對象和一個MouseEvent對象。
  • region-created:當某個區域被創建時觸發。回調函數接收一個Region對象。
  • region-updated:當某個區域被更新時觸發。回調函數接收一個Region對象。
  • region-update-end:當拖動或改變尺寸結束時觸發。
  • region-removed:當某個區域被移除時觸發。回調函數接收一個Region對象。
Regions 插件
Regions用于音頻播放器waveform視覺效果部分,可以用它來播放和循環音頻文件。Regions可以被拖拽和改變尺寸大小。
一般通過CSS文件來定制樣式效果,使用選擇器.wavesurfer-region和.wavesurfer-handle。
要使用Regions插件,在頁面中要引入plugin/wavesurfer.regions.js文件。
然后可以使用wavesurfer.addRegion()方法來創建Region對象。
Region公開方法
  • addRegion(options):在waveform中創建一個Region。返回一個Region對象。
  • clearRegions():移除所有的Regions。
  • enableDragSelection(options):可以通過選擇來創建Regin。waveform的區域通過鼠標來確定。options參數是Region對象的參數。
Region參數[td]
參數類型默認值描述
idstringrandomregion的id。
startfloat0region的開始位置,單位秒。
endfloat0region的結束位置,單位秒。
loopbooleanfalseWhether to loop the region when played back.
dragbooleantrue是否允許拖拽region。
resizebooleantrue是否允許改變region的尺寸。
colorstring"rgba(0, 0, 0, 0.1)"HTML演示代碼。

Region方法
  • in:當playback進入region時觸發。
  • out:當playback離開region時觸發。
  • remove:在region被移除前觸發。
  • update:當region的選項被更新時觸發。
  • click:當鼠標在region中點擊時觸發。回調函數接收MouseEvent對象。
  • dblclick:當鼠標在region中雙擊時觸發。回調函數接收MouseEvent對象。
  • over:當鼠標在region中滑過時觸發。回調函數接收MouseEvent對象。
  • leave:當鼠標離開region時觸發。回調函數接收MouseEvent對象。



您需要登錄后才可以回帖 登錄 | 注冊

本版積分規則

QQ|小黑屋|手機版|Archiver|版權聲明|音樂吧 1327.net ( 桂IPC 網站備案中... )

GMT+8, 2020-2-17 16:07 , Processed in 0.037073 second(s), 27 queries .

Powered by Discuz! X3.4

© 2001-2017 1327.Net Inc.

快速回復 返回頂部 返回列表
网络抢庄牛牛是真人玩的吗