Senff - a11n

Audio Wave Block adds a block to the Block Editor, that can be used to play any audio file on your site. It only has a Play/Pause button and shows the waveform of the audio, and during playing it shows a progress bar, using the WaveSurfer library.
<h3>Features:</h3>
<ul>
<li>Shows the audio waveform, representating the sound levels of the audio file.</li>
<li>Progress bar can be dragged to any position.</li>
<li>Customizable colors for the player background, button and waveform (played/unplayed).</li>
<li>Multiple players can be present on a single post/page.</li>
<li>When starting a player, any other players that are already playing on the same page will pause (avoiding multiple players running at the same time).</li>
</ul>
<h3>Third-Party Libraries</h3>
This plugin includes WaveSurfer.js (https://wavesurfer.xyz/) v7.12.6, used for audio waveform rendering.
<ul>
<li>License: BSD 3-Clause </li>
<li>Copyright: © 2012–2024 katspaugh and contributors </li>
<li>Source: https://github.com/katspaugh/wavesurfer.js</li>
</ul>

Audio Wave Block

A simple audio player for the Block editor with just a Play/Pause button and a waveform representing the soundwaves.

tymotey

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:
<pre><code> global $easywaveformplayer;
echo $easywaveformplayer->easywaveformplayer(
 array(
 'audio' => 'https://link.to/audio.mp3',
 )
);
</code></pre>
3) Write manual shortcode using examples below
Examples:
<ul>
<li>Load audio by libray id: <code>[easywaveformplayer audio="6"]</code></li>
<li>Load audio by URL: <code>[easywaveformplayer audio="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3"]</code></li>
<li>Autoplay(this requires that user allow permission to autoplay for your page): <code>[easywaveformplayer audio="6" autoplay="1"]</code></li>
<li>Add title: <code>[easywaveformplayer audio="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" title="This is a title"]</code></li>
<li>Animated appearence of timeline: <code>[easywaveformplayer audio="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" animated="true"]</code></li>
<li>Wave design changes: <code>[easywaveformplayer audio="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" timeline_wave_color="#FF0000" timeline_progress_color="#000000"]</code></li>
<li>Colored timelime background(including gradient): <code>[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%)"]</code></li>
<li>Minimum size and adding different size then default: <code>[easywaveformplayer audio="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" min="true" mini_size="100"]</code></li>
<li>Minimum size with progress indicator: <code>[easywaveformplayer audio="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" min="true" show_progress="true"]</code></li>
</ul>
Parameters and default values:
<ul>
<li>id -> ” can be any value containing letters, numbers, _ OR – Value Added will be concatenated with: “ewfplayer_”. Eg: ewfplayer_mainplayer</li>
<li>always_play -> 0 (0 – it will stop when other player start playing, 1 – it will continue playing when other start playing)</li>
<li>autoplay -> 0 (accepted 0 or 1 values)</li>
<li>animated -> false (accepted true or false values)</li>
<li>min -> false (accepted true or false values)</li>
<li>show_progress -> false (accepted true or false values)</li>
<li>player_width -> 100% (any css width values)</li>
<li>player_position -> left (left, center, right)</li>
<li>player_background_color -> transparent (or other CSS color)</li>
<li>mini_size -> 60 (in px)</li>
<li>mini_border_size -> 2 (in px)</li>
<li>mini_border_color -> #000000 (transparent or other CSS color)</li>
<li>progress_circle_thickness -> 4 (in px)</li>
<li>progress_circle_color -> #FF0000 (transparent or other CSS color)</li>
<li>controller_size -> 40 (in px)</li>
<li>controller_color -> #000000 (transparent or other CSS color)</li>
<li>timeline_background_color -> transparent (in px)</li>
<li>timeline_wave_color -> #999999 (transparent or other CSS color)</li>
<li>timeline_progress_color -> #555555 (transparent or other CSS color)</li>
<li>timeline_cursor_width -> 1 (in px)</li>
<li>timeline_cursor_color -> #333333 (transparent or other CSS color)</li>
<li>timeline_height -> 128 (in px)</li>
<li>timeline_bar_gap -> 0 (any number, starting from 0)</li>
<li>timeline_bar_width -> 0 (any number, starting from 0)</li>
<li>timeline_bar_radius -> 0 (any number, starting from 0)</li>
</ul>
Built using library: <a href="https://wavesurfer-js.org/" rel="nofollow ugc">https://wavesurfer-js.org/</a>
SSL certificate is REQUIRED for the plugin to work!

Easy Waveform Player

Add Waveform players easy and fast to your WordPress.

Audio Wave Block vs Easy Waveform Player