[WordPress] 外掛分享： Easy Waveform Player

前言介紹

  • 這款 WordPress 外掛「Easy Waveform Player」是 2020-10-12 上架。
  • 目前有 100 個安裝啟用數。
  • 上一次更新是 2024-12-15，距離現在已有 139 天。
  • 外掛最低要求 WordPress 5.0 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 7.0 以上。
  • 尚未有人給過這款外掛評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

tymotey |

外掛標籤

audio | player | waveform | WPBakery | elementor |

內容簡介

這個外掛需要 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!

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Easy Waveform Player」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.0.0 | 1.1.0 | 1.1.1 | 1.2.0 | 1.2.1 | trunk |

延伸相關外掛（你可能也想知道）

  • WPBakery Page Builder Addons by Livemesh 》Livemesh Addons for WPBakery Page Builder 是一個專業、容易使用且高度功能性的擴充套件，可用於 WPBakery Page Builder 中。這是一個真正的高級外掛，您可...。
  • Video Background 》Video Background 外掛提供了一種簡單易用的方式，讓你可以將影片背景添加到 WordPress 網站上的任何元素。, 有 4 個簡單必填欄位：, , 容器（Container）：...。
  • Export & Import WPBakery Page Builder 》以幾個點擊，將 WPBakery Page Builder 的模板（已儲存的模板/我的模板）匯出與匯入。, 此外掛是 WPBakery Page Builder 的附加元件。, 功能, , , 以...。
  • Unlimited Addons for WPBakery Page Builder 》Unlimited Addons 是一個無限的 WPBakery Page Builder 外掛套件，讓您可以設計及開發具有無限可能性的 WPBakery 頁面。, 管理 Addons 現在更簡單、快速和有...。
  • SW Product Bundles 》SW Product Bundles 是一個外掛，其功能是協助您在 WooCommerce 中創建新的產品類型。它可以將多個產品或服務作為組合產品或服務打包。, 透過此外掛，您可以...。
  • Extensive VC Addons for WPBakery page builder 》Extensive VC 外掛是一款強大的 WordPress 工具，可以讓您在網站上添加獨特、靈活且完全響應的 shortcode 元素。這是 WPBakery Page Builder 的插件，因此您...。
  • WPBakery Visual Composer WHMCS Elements 》這個外掛添加了新的元素/小工具，例如：域名搜索、即時域名搜索（pro）、定價表、從你的 WHMCS 直接提取價格的即時定價表，這樣每次更新 WHMCS 中的價格時就...。
  • Classic Addons – WPBakery Page Builder 》Classic Addons For WPBakery Page Builder ～ WPBakery最大的附加元件包，包含 15+ 高度自定義的元件和附加元件。此附加元件包為您提供 WPBakery 網頁建構器...。
  • Advanced Ads for WPBakery Page Builder 》這個外掛結合了WPBakery網頁編輯器和Advanced Ads廣告管理外掛，讓使用該拖放式網頁編輯器建立的網站可以整合廣告和橫幅。, 廣告管理功能, Advanced Ads是一...。
  • WC Builder – WooCommerce Page Builder for WPBakery 》WC Builder是一個WPBakery Page Builder的WooCommerce外掛程式。此外掛程式包含WC Builder，可用於建立自訂的產品頁和存檔頁。, 下載WC Builder免費和專業版...。
  • WPBakery Page Builder Simple All Responsive 》VC Simple All Responsive 外掛可為使用 Page Builder 建立的網站提供完整的響應式設計。到目前為止，我們已經能夠決定某些行和列出現（或不出現）的屏幕。現...。
  • Tabs For WPBakery Page Builder (formerly Visual Composer) 》WPBakery Page Builder 的標籤唯一且首個插件, 這款 WPBakery Page Builder 的標籤插件非常簡單，它允許使用者將任何內容以不同的風格及配色方案放入標籤中。...。
  • HT Mega – Absolute Addons for WPBakery Page Builder 》HTMega是一款絕對必備的WPBakery Page builder外掛，包含29+元件，擁有無限變化。HT Mega帶來無限可能性。藉由HT Mega的元件裝飾您的網站。, 您可以在此查看...。
  • Hide Content by User Role for WPBakery 》這個外掛為 WPBakery 頁面編輯器中的所有元素添加設置，以根據用戶角色來隱藏/顯示網站上的內容元素，這樣您就可以在 WPBakery 的頁面和文章中輕鬆限制內容。...。
  • Disable Elements for WPBakery Page Builder 》此外掛會在 WPBakery Page Builder > Disable Elements 下新增一個頁面，讓您可以禁用未使用的元素。此外掛是為 Total Theme 設計而成，因為我們的許多客...。

文章
Filter
Apply Filters
Close
Mastodon