內容簡介
這個外掛需要 SSL 憑證才能運作!
Easy Waveform Player 讓你可以即時生成音訊檔案的可視化波形。
僅在需要時載入音訊。如果顯示多個播放器,它們不會同時載入所有音訊。
當其他 Easy Waveform Player 播放時即可自動停止。
如何使用:
1)使用你所安裝的編輯器中的區塊(已集成於:Gutenberg、Elementor、WPBakery Visual Builder、DIVI)
2)以程式碼方式執行。範例如下:
global $easywaveformplayer;
echo $easywaveformplayer->easywaveformplayer(
array(
'audio' => 'https://link.to/audio.mp3',
)
);
3)使用以下範例手動編寫shortcode
範例:
透過資料庫 ID 載入音訊:[easywaveformplayer audio="6"]
透過 URL 載入音訊:[easywaveformplayer audio="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3"]
自動播放(需要使用者允許網頁自動播放):[easywaveformplayer audio="6" autoplay="1"]
新增標題:[easywaveformplayer audio="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" title="This is a title"]
時間軸有動畫效果:[easywaveformplayer audio="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" animated="true"]
更改波形設計:[easywaveformplayer audio="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" timeline_wave_color="#FF0000" timeline_progress_color="#000000"]
加入彩色時間軸背景(包含漸層):[easywaveformplayer audio="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" timeline_background_color="linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)"]
最小尺寸並新增不同尺寸: [easywaveformplayer audio="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" min="true" mini_size="100"]
加入進度指示器的最小尺寸:[easywaveformplayer audio="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" min="true" show_progress="true"]
參數及預設值如下:
id -> 「可以包含字母、數字、_ 或 – 的任何值」。已新增的值將與「ewfplayer_」串連。例如:ewfplayer_mainplayer
always_play -> 0(0 意為當其他播放器開始播放時會停止,1 意為會繼續播放)
autoplay -> 0(接受 0 或 1)
animated -> false(接受 true 或 false)
min -> false(接受 true 或 false)
show_progress -> false(接受 true 或 false)
player_width -> 100%(任何 CSS 長度值)
player_position -> left(left、center、right)
player_background_color -> transparent(或其他 CSS 顏色)
mini_size -> 60(以 px 計算)
mini_border_size -> 2(以 px 計算)
mini_border_color -> #000000(transparent 或其他 CSS 顏色)
progress_circle_thickness -> 4(以 px 計算)
progress_circle_color -> #FF0000(transparent 或其他 CSS 顏色)
controller_size -> 40(以 px 計算)
controller_color -> #000000(transparent 或其他 CSS 顏色)
timeline_background_color -> transparent(或其他 CSS 顏色)
timeline_wave_color -> #999999(transparent
外掛標籤
開發者團隊
原文外掛簡介
SSL certificate is REQUIRED for the plugin to work!
Easy Waveform Player allows you to add visual waveform, generated on the fly, for an audio file.
Loads audio on request only. If multiple players are showed they will not over load all the audio at once.
Autostop other Easy Waveform Players if they are playing.
How to use:
1) Use the block from the editor you have installed(intergrated in: Gutenberb, Elementor, WPBakery Visual Builder, DIVI)
2) Run code programatically. Code example:
global $easywaveformplayer;
echo $easywaveformplayer->easywaveformplayer(
array(
'audio' => 'https://link.to/audio.mp3',
)
);
3) Write manual shortcode using examples below
Examples:
Load audio by libray id: [easywaveformplayer audio="6"]
Load audio by URL: [easywaveformplayer audio="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3"]
Autoplay(this requires that user allow permission to autoplay for your page): [easywaveformplayer audio="6" autoplay="1"]
Add title: [easywaveformplayer audio="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" title="This is a title"]
Animated appearence of timeline: [easywaveformplayer audio="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" animated="true"]
Wave design changes: [easywaveformplayer audio="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" timeline_wave_color="#FF0000" timeline_progress_color="#000000"]
Colored timelime background(including gradient): [easywaveformplayer audio="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" timeline_background_color="linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)"]
Minimum size and adding different size then default: [easywaveformplayer audio="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" min="true" mini_size="100"]
Minimum size with progress indicator: [easywaveformplayer audio="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" min="true" show_progress="true"]
Parameters and default values:
id -> ” can be any value containing letters, numbers, _ OR – Value Added will be concatenated with: “ewfplayer_”. Eg: ewfplayer_mainplayer
always_play -> 0 (0 – it will stop when other player start playing, 1 – it will continue playing when other start playing)
autoplay -> 0 (accepted 0 or 1 values)
animated -> false (accepted true or false values)
min -> false (accepted true or false values)
show_progress -> false (accepted true or false values)
player_width -> 100% (any css width values)
player_position -> left (left, center, right)
player_background_color -> transparent (or other CSS color)
mini_size -> 60 (in px)
mini_border_size -> 2 (in px)
mini_border_color -> #000000 (transparent or other CSS color)
progress_circle_thickness -> 4 (in px)
progress_circle_color -> #FF0000 (transparent or other CSS color)
controller_size -> 40 (in px)
controller_color -> #000000 (transparent or other CSS color)
timeline_background_color -> transparent (in px)
timeline_wave_color -> #999999 (transparent or other CSS color)
timeline_progress_color -> #555555 (transparent or other CSS color)
timeline_cursor_width -> 1 (in px)
timeline_cursor_color -> #333333 (transparent or other CSS color)
timeline_height -> 128 (in px)
timeline_bar_gap -> 0 (any number, starting from 0)
timeline_bar_width -> 0 (any number, starting from 0)
timeline_bar_radius -> 0 (any number, starting from 0)
Built using library: https://wavesurfer-js.org/
SSL certificate is REQUIRED for the plugin to work!
