Title: WaveSurfer-WP Author: X-Raym Published: 2015 年 11 月 26 日 Last modified: 2026 年 2 月 4 日 --- 搜尋外掛 ![](https://ps.w.org/wavesurfer-wp/assets/banner-772x250.png?rev=1295137) 這個外掛**並未在最新的 3 個 WordPress 主要版本上進行測試**。開發者可能不再對這個 外掛進行維護或提供技術支援，並可能會與更新版本的 WordPress 產生使用上的相容性問題。 ![](https://ps.w.org/wavesurfer-wp/assets/icon-128x128.png?rev=1295137) # WaveSurfer-WP 由 [X-Raym](https://profiles.wordpress.org/x-raym/) 開發 [下載](https://downloads.wordpress.org/plugin/wavesurfer-wp.zip) * [詳細資料](https://tw.wordpress.org/plugins/wavesurfer-wp/#description) * [使用者評論](https://tw.wordpress.org/plugins/wavesurfer-wp/#reviews) * [安裝方式](https://tw.wordpress.org/plugins/wavesurfer-wp/#installation) * [開發資訊](https://tw.wordpress.org/plugins/wavesurfer-wp/#developers) [技術支援](https://wordpress.org/support/plugin/wavesurfer-wp/) ## 外掛說明 This plugin replaces the default WordPress audio player with a player capable of displaying audio waveforms. It can display a mix of the different audio channels( for podcast, radio replays, e-learning, music), or all channels simultaneously ( for sound tutorial, sounds-packs showcases, audio products demo etc…), which is its main purpose. By working with the default audio/playlist shortcode, you have great advantages: * It works with all your previous posts * You still have the default player in the Visual Editor (not just shortcode) * It supports every audio format supported by WordPress (wav, ogg, mp3, m4a). * Safe deactivation: if you deactivate the plugin, your shortcode will fallback to the WordPress default audio player. Global colors and style settings can be overridden locally by dedicated shortcode attributes. * `progress_color="purple"` * `wave_color="#FF0000"` * `cursor_color="#FF0000"` * `height="128"` * `bar_width="0"` Also, there is some attributes accessible at shortcode level: * `mute_button="true"` * `loop_button="true"` * `download_button="true"` * `split_channels="true"` * `player="default"` For more advanced customization, with a custom [site-plugin](http://www.wpbeginner.com/beginners-guide/what-why-and-how-tos-of-creating-a-site-specific-wordpress-plugin/), you can: * add shortcode attributes conditionally with the filter `wavesurfer_wp_shortcode_attributes`. * use the `wavesurfer_wp_shortcode_data` filter if you want to add custom waveform data attributes. * use the `wavesurfer-wp-init` JavaScript event handler to render the player on custom events, like after click on a button. See examples on the [WaveSurfer-WP-Init](https://github.com/X-Raym/wavesurfer-wp-init) GitHub repository. Check this [Gist](https://gist.github.com/X-Raym/5c388e6554b30ca6a56646fb8d96d17f) for demos of how to use the filters. Extra features : * Pressing play on a player automatically set all the others on the same page to pause. * AJAX Page loading compatibility * MultiSite Friendly The default style requires some icons of [Font-Awesome 1.0](https://fortawesome.github.io/). These are included in the plugin as a small custom font. Because this icon-font is already used in a lot of themes and plugins, you can deactivate this custom font if needed. You can deactivate the default WaveSurder-WP theme, and use your own theme style. I strongly encourage you to do that as custom CSS is the only way to make it fit your theme perfectly. There is a lot of dedicated CSS selectors for that. You can take one of the included theme as reference. This will allow you to have more control on icons, responsivity, mouse hover behavior etc… [More Infos & Demos](https://www.extremraym.com/en/wavesurfer-wp) You can contribute by to WaveSurfer-WP development on [GitHub](https://github.com/x-raym/wavesurfer-wp) Themes and Translations are welcome ! Optimization trick: if you only use this plugin on a couple of pages, I invite you to use a plugin like [Plugin Organizer](https://wordpress.org/plugins/plugin-organizer/) or [Gonzales](http://tomasz-dobrzynski.com/wordpress-gonzales) to globally deactivate the plugin or its style, and make it load resources only on pages which need it. No need for that on the back-end, only for front-end. This player doesn’t have and will not have Like Button, Sharing Button, Play count and Download count. If you are looking for a WordPress player with such Social Features and advanced statistics like [SoundCloud](http://www.soundcloud.com) or [Hearthis.at](http://www.hearthis.at), take a look at [ZoomSounds](http://codecanyon.net/item/zoomsounds-neat-html5-audio-player/4525354). For other advanced WordPress integration of wavesurfer-js, you can check [WavePlayer](http://codecanyon.net/item/waveplayer-a-wordpress-audio-player/14349799) by luigipulcini or [WaveSurfer-Plus](https://codecanyon.net/item/wavesurfer-plus-mp3-player-module-for-gmedia-plugin/19242349) by GalleryCreator. Contrary to the other WordPress plugin based on wavesurfer-js, wavesurfer-js hasn’t been modified in this plugin. This means that you can extend feature of this plugin using the wavesurfer-js [methods](http://wavesurfer-js.org/), and that updates from the wavesurfer-js community will be pushed in WaveSurfer-WP regularly. WordPress 5 and Guteberg: Inserting `[audio]` with Gutenberg doesn’t bring the `[ audio]` shortcode as it use to be. As this plugin is designed to hook the audio shortcode, you can use the generic shortcode block in gutenberg to manually write your shortcode, or use the classic editor. #### WaveSurfer-WP Premium Add-on A premium add-on is available to add extra features to WaveSurfer-WP. * Cache Peaks File This add-on creates and loads peaks from small files, containing peaks values. No need to wait for the full audio to be decoded to display its waveform. * Markers System You can add custom clickable element on your pages to seek WaveSurfer- WP player to a desired position. Can be useful for adding marks, chapters, and it can even be used for [interactive audio transcripts](https://www.extremraym.com/en/wavesurfer-wp-markers)! * Plug and Play These extra features are packed as an add-on. No need to delete and replace the original plugin. You will still be able to benefit from translations made by the community. Also, the core is still open source, to allow contribution. * TimeLine Plugin When activated thanks to a shortcode attribute, a customizable time ruler will appear below your waveform. You can buy it from the official [product page](https://www.extremraym.com/en/downloads/wavesurfer-wp-premium). Thanks for considering this way to support WaveSurfer-WP ! ### Additional Infos It is a port for WordPress of [WaveSurfer-js](http://wavesurfer-js.org/) by katspaugh. It also contains [Download-js](http://danml.com/download.html) by dandavis. ### Donators Thanks to our generous donators for supporting this plugin development ! 1. [SignalToNoize.com](http://signaltonoize.com/) 2. [hawthonn](http://theopod.com) 3. [Rob](http://soundpacks.com) 4. [Robert Getzener](http://robertgetzner.com/) Do you want to contribute or sponsor one particular feature ? See you on the [donation page](https://www.extremraym.com/en/donation/). Thanks ! ## 螢幕擷圖 [⌊Front-End Settings Page⌉⌊Front-End Settings Page⌉[ Front-End Settings Page [⌊Back-End Settings Page⌉⌊Back-End Settings Page⌉[ Back-End Settings Page [⌊Mute, Loop and Download buttons with the Flat Icons Style⌉⌊Mute, Loop and Download buttons with the Flat Icons Style⌉[ Mute, Loop and Download buttons with the Flat Icons Style ## 安裝方式 For an automatic installation through WordPress: 1. Go to the _Add New_ plugins screen in your WordPress admin area 2. Search for _WaveSurfer-WP_ 3. Click _Install Now_ and activate the plugin For a manual installation via FTP: 1. Upload the `wavesurfer-wp` directory to the `/wp-content/plugins/` directory 2. Activate the plugin through the _Plugins_ screen in your WordPress admin area To upload the plugin through WordPress, instead of FTP: 1. Upload the downloaded zip file on the Add New* plugins screen (see the _Upload_ tab) in your WordPress admin area and activate. ## 常見問題集 ### The buttons appear but not the Waveform Shortcode are interpreted but there is problem for loading the file. I/ The most common error is that the file is hosted on a CDN that isn’t set to allow the kind of requests made by WaveSurfer-js. So, you can choose one of these solutions : * Deactivate WaveSurfer for this particular instance using player=”default” in the shortcode * Go to your CDN settings panel and allow Access-Control-Allow-Origin for XMLHttpRequest * Host your file on your main server II/ This problem may also occurs if your file is not supported by your browser. Some audio formats / browsers combo are not possible. This cannot be fixed by our side. (For ex, wav 24 bits in FireFox). Convert the file to a more web-friendly format and try again. III/ Also, check that your file is accessible via http (aka, check if the link is valid). Please report other problems on the support forum. ## 使用者評論 ![](https://secure.gravatar.com/avatar/c83ba69c2b72fb690393655262456942c364dd84bdd4b765e4fc2d26d9e49580? s=60&d=retro&r=g) ### 󠀁[Great plugin with nice premium features & support](https://wordpress.org/support/topic/great-plugin-with-nice-premium-features-support/)󠁿 [zesvoetvier](https://profiles.wordpress.org/zesvoetvier/) 2017 年 5 月 10 日 1 則留言 Basic set-up is great, premium set-up even better (cached waveforms!) At first combining it with Ajax Load More plugin was a bit difficult, but quick adjustments by the developer really made my day. ![](https://secure.gravatar.com/avatar/497df0d1a4f65ea89687322c6f4d587550cac3522d87480d43437d3c9c384563? s=60&d=retro&r=g) ### 󠀁[Just perfect!](https://wordpress.org/support/topic/thx-52/)󠁿 [andreeaforce](https://profiles.wordpress.org/andreeaforce/) 2017 年 3 月 7 日 Great work! It works really good! Thank you! ![](https://secure.gravatar.com/avatar/78363f8f07ab750e3a4f1ab2f8b95d5f806cd55482192ec0acc716f049c90f14? s=60&d=retro&r=g) ### 󠀁[This plug-in is very powerful](https://wordpress.org/support/topic/this-plug-in-is-very-powerful/)󠁿 [blaze1999](https://profiles.wordpress.org/blaze1999/) 2016 年 10 月 27 日 I purchased this plugin This plug-in is very powerful For my site to save a lot of traffic I gave the author some feedback, the author helped me to solve thank you very much my site: http://100audio.com/en/ ![](https://secure.gravatar.com/avatar/733879599676415f342fc05dd7e13a9c322d7bc60c446ec0b5ded2bd03506085? s=60&d=retro&r=g) ### 󠀁[works fine](https://wordpress.org/support/topic/works-fine-542/)󠁿 [Benoti](https://profiles.wordpress.org/benoti/) 2016 年 9 月 3 日 2 則留言 Works fine. Thank you ![](https://secure.gravatar.com/avatar/cd5f05ceb3400c47db4ae688991f04b3514d95871cec4002d7ad2bbfe1a364b7? s=60&d=retro&r=g) ### 󠀁[Good job!](https://wordpress.org/support/topic/good-job-471/)󠁿 [mikblog](https://profiles.wordpress.org/mikblog/) 2016 年 9 月 3 日 1 則留言 Thanks for making this plugin! ![](https://secure.gravatar.com/avatar/4c7824d2de34a59db5ddd542a8d95884f4d8e77f94045026f15a15d0be689253? s=60&d=retro&r=g) ### 󠀁[really impressive](https://wordpress.org/support/topic/really-impressive-3/)󠁿 [agenciesFirst](https://profiles.wordpress.org/agenciesfirst/) 2016 年 9 月 3 日 1 則留言 Works really good and simple, good job, thank you 🙂 The Waveform doesn’t work in Multisite environment. [ 閱讀全部 11 則使用者評論 ](https://wordpress.org/support/plugin/wavesurfer-wp/reviews/) ## 參與者及開發者 以下人員參與了開源軟體〈WaveSurfer-WP〉的開發相關工作。 參與者 * [ X-Raym ](https://profiles.wordpress.org/x-raym/) [將〈WaveSurfer-WP〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/wavesurfer-wp) ### 對開發相關資訊感興趣？ 任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/wavesurfer-wp/)、 查看 [SVN 存放庫](https://plugins.svn.wordpress.org/wavesurfer-wp/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/wavesurfer-wp/?limit=100&mode=stop_on_copy&format=rss) 訂閱[開發記錄](https://plugins.trac.wordpress.org/log/wavesurfer-wp/)。 ## 變更記錄 #### 2.8.4 (2026-02-04) * Sanitize links in shortcode attributes #### 2.8.3 (2020-08-01) * Update dependencies (Wavesurfer 4.0.1 #1990 bug fix) #### 2.8.2 (2020-06-28) * Update dependencies (Wavesurfer 4.0.1) #### 2.8.1 (2020-06-22) * Update dependencies (Wavesurfer 4.0.0) #### 2.8 (2018-12-30) * Update dependencies (Wavesurfer 2.1.1) #### 2.7.5 (2017-05-16) * Prevent some errors with AJAX init #### 2.7.4 (2017-05-16) * Support arrays of IDs for playlist shortcode #### 2.7.3 (2017-04-18) * Filters: better logic. * Scripts: dependencies minification. Dev versions can be loaded thanks to WordPress SCRIPT_DEBUG variable. * Better compatibility with AJAX #### 2.7.2 (2017-04-14) * Continuous shortcode attribute for playlist support for the premium add-on #### 2.7.1 (2017-01-27) * Better internal hook names #### 2.7 (2017-01-19) * Add sound duration, title (fallback to post title), thumbnail and artist in playlist tracks * Fix ‘default’ shortcode attribute behavior for playlists * MultiSite friendly * Notices fixes * Small styles enhancements * Possibility to enqueue/dequeue a custom icons font (default is enqueue) #### 2.6.4 (2016-12-21) * Updated styles for WaveSurfer-WP-Premium interactive markers system #### 2.6.3 (2016-11-29) * AJAX Page loading compatibility is back * JavaScript hook for custom WaveSurfer-WP player initialization #### 2.6.2 (2016-11-22) * Fixed Playlist behavior. * Back to wavesurfer-js original fork. * Fixed playlist with one file only warning error. #### 2.6.1 (2016-10-31) * Fixed one attachment playlist shortcode PHP warning error. #### 2.6 (2016-10-24) * Added new filters for bulk adding shortcode attributes or waveform data. #### 2.5.3 (2016-10-22) * Optimizations for WaveSurfer-WP Premium #### 2.5.2 (2016-10-19) * Performance: Don’t load audio unless play is clicked (waveforms are still drawn at page ready) #### 2.5.1 (2016-10-17) * Fixed playlist with one file only issue. #### 2.5 (2016-10-07) * Updated for WaveSurfer-WP Premium add-on * Better localization domain name * Update wavesurfer-js with custom version * Various enhancements #### 2.3.1 (2016-03-23) * Player can now be translated #### 2.3 (2016-03-20) * Play one player pause the others * Scripts only loaded when shortcode is present * Loop button on playlist now works as expected * “Resume” instead of “Play” for paused players #### 2.2 (2016-03-15) * Backend: to back MediaElement instead of WebAudio, which make it possible to play while file is loading. No progress bar while loading needed anymore, and maybe less restrictions with CDN. * height shortcode and setting * Play/Pause button is now only Play or Pause according to its state. Same for Mute button and Loop buttons, with Unmute and Unloop, for better accessibility. * Prevent z-index error in style * Prevent max-width canvas error * Script init optimization * WaveSurfer-js 1.0.58 from 2016-02-28 #### 2.1.3 (2016-02-23) * Fix double slash in URL (thanks to Glen Rowell) #### 2.1.2 (2016-01-05) * AJAX pages loading compatible * Few HTML optimizations #### 2.1.1 (2016-01-03) * Src attribute in audio shortcode is now valid #### 2.1.0 (2016-01-03) * Playlist shortcode support * Responsive waveform * Deleted Lang Packs (now hosted by WordPress.org) #### 2.0.0 (2015-12-29) * New WebAudio rendering for better performance * wavesurfer.js 1.0.48 #### 1.1.0 (2015-11-30) * Cursor Color setting and shortcode * Download Button shortcode * Loop Button shortcode * Mute Button shortcode * Flat Icons theme * Play/Pause buttons have merged #### 1.0.0 (2015-11-24) * First release. ## 中繼資料 * 版本 **2.8.4** * 最後更新 **6 個月前** * 啟用安裝數 **400+** * WordPress 版本需求 ** 4.0 或更新版本 ** * 已測試相容的 WordPress 版本 **5.4.19** * 語言 * [English (US)](https://wordpress.org/plugins/wavesurfer-wp/) * 標籤: * [audio](https://tw.wordpress.org/plugins/tags/audio/)[media](https://tw.wordpress.org/plugins/tags/media/) [player](https://tw.wordpress.org/plugins/tags/player/)[visualization](https://tw.wordpress.org/plugins/tags/visualization/) [waveform](https://tw.wordpress.org/plugins/tags/waveform/) * [進階檢視](https://tw.wordpress.org/plugins/wavesurfer-wp/advanced/) ## 評分 5 星，滿分為 5 星 * [ 11 個 5 星使用者評論 ](https://wordpress.org/support/plugin/wavesurfer-wp/reviews/?filter=5) * [ 0 個 4 星使用者評論 ](https://wordpress.org/support/plugin/wavesurfer-wp/reviews/?filter=4) * [ 0 個 3 星使用者評論 ](https://wordpress.org/support/plugin/wavesurfer-wp/reviews/?filter=3) * [ 0 個 2 星使用者評論 ](https://wordpress.org/support/plugin/wavesurfer-wp/reviews/?filter=2) * [ 0 個 1 星使用者評論 ](https://wordpress.org/support/plugin/wavesurfer-wp/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/wavesurfer-wp/reviews/#new-post) [查看全部使用者評論](https://wordpress.org/support/plugin/wavesurfer-wp/reviews/) ## 參與者 * [ X-Raym ](https://profiles.wordpress.org/x-raym/) ## 技術支援 使用者可在技術支援論壇提出意見反應或使用問題。 [檢視技術支援論壇](https://wordpress.org/support/plugin/wavesurfer-wp/) ## 贊助 想要支援這個外掛的發展嗎？ [ 贊助這個外掛 ](https://www.extremraym.com/en/donation/)