vlty

Chartlet is a lightweight, performance-focused plugin for creating beautiful, interactive charts and graphs via shortcodes.
Stop bloating your database! Unlike other chart plugins that store every graph as a custom post type, Chartlet stores all configurations directly within the shortcode. This makes your site faster and your data easier to manage.
Using the power of Chart.js (loaded locally for maximum privacy and GDPR compliance), Chartlet allows you to visualize data in seconds. Perfect for data journalism, financial reports, or simply adding a professional touch to your blog posts.
<h3>Key Benefits:</h3>
<ul>
<li>Zero Database Bloat: No per-chart database entries. Everything lives in your content.</li>
<li>Ultra Lightweight: Optimized for Core Web Vitals and speed.</li>
<li>GDPR Compliant: No external CDNs. Chart.js is served directly from your server.</li>
<li>Intuitive Builder: Create charts visually in your admin settings and get a shortcode instantly.</li>
</ul>
<h3>Features</h3>
<ul>
<li>Multiple Chart Types: Choose between Bar, Line, Pie, and Doughnut charts.</li>
<li>Live Shortcode Builder: Configure labels, data points, colors, and dimensions with a real-time generator.</li>
<li>Fully Responsive: Charts automatically scale to fit any screen size (mobile, tablet, desktop).</li>
<li>Smart Defaults: Set global brand colors and heights in the settings to keep your charts consistent.</li>
<li>Custom Units: Add prefixes (e.g., $) or suffixes (e.g., %) to your data tooltips.</li>
<li>Translation Ready: Fully compatible with multilingual sites.</li>
</ul>
<h3>Usage</h3>
Go to Chartlet → Generate. Use the visual builder to: 
1. Select your chart type. 
2. Input labels and data (separated by <code>,</code>). 
3. Customize colors, title, and height. 
4. Add a value suffix (e.g., %) or prefix (e.g., $). 
5. Click Generate Shortcode, copy it, and paste it anywhere!
Manual Shortcode Example: 
 [chartlet type=”bar” labels=”Jan,Feb,Mar” data=”10,20,15″ colors=”#3366cc,#dc3912″ title=”Revenue” height=”300″ prefix=”$”]

Chartlet

The lightest way to create beautiful, responsive charts in WordPress. No database clutter, no heavy libraries — just pure performance.

X-Raym

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:
<ul>
<li>It works with all your previous posts</li>
<li>You still have the default player in the Visual Editor (not just shortcode)</li>
<li>It supports every audio format supported by WordPress (wav, ogg, mp3, m4a).</li>
<li>Safe deactivation: if you deactivate the plugin, your shortcode will fallback to the WordPress default audio player.</li>
</ul>
Global colors and style settings can be overridden locally by dedicated shortcode attributes.
<ul>
<li><code>progress_color="purple"</code></li>
<li><code>wave_color="#FF0000"</code></li>
<li><code>cursor_color="#FF0000"</code></li>
<li><code>height="128"</code></li>
<li><code>bar_width="0"</code></li>
</ul>
Also, there is some attributes accessible at shortcode level:
<ul>
<li><code>mute_button="true"</code></li>
<li><code>loop_button="true"</code></li>
<li><code>download_button="true"</code></li>
<li><code>split_channels="true"</code></li>
<li><code>player="default"</code></li>
</ul>
For more advanced customization, with a custom <a href="http://www.wpbeginner.com/beginners-guide/what-why-and-how-tos-of-creating-a-site-specific-wordpress-plugin/" rel="nofollow ugc">site-plugin</a>, you can:
<ul>
<li>add shortcode attributes conditionally with the filter <code>wavesurfer_wp_shortcode_attributes</code>.</li>
<li>use the <code>wavesurfer_wp_shortcode_data</code> filter if you want to add custom waveform data attributes.</li>
<li>use the <code>wavesurfer-wp-init</code> JavaScript event handler to render the player on custom events, like after click on a button. See examples on the <a href="https://github.com/X-Raym/wavesurfer-wp-init" rel="nofollow ugc">WaveSurfer-WP-Init</a> GitHub repository.</li>
</ul>
Check this <a href="https://gist.github.com/X-Raym/5c388e6554b30ca6a56646fb8d96d17f" rel="nofollow ugc">Gist</a> for demos of how to use the filters.
Extra features :
<ul>
<li>Pressing play on a player automatically set all the others on the same page to pause.</li>
<li>AJAX Page loading compatibility</li>
<li>MultiSite Friendly</li>
</ul>
The default style requires some icons of <a href="https://fortawesome.github.io/" rel="nofollow ugc">Font-Awesome 1.0</a>. 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…
<a href="https://www.extremraym.com/en/wavesurfer-wp" rel="nofollow ugc">More Infos & Demos</a>
You can contribute by to WaveSurfer-WP development on <a href="https://github.com/x-raym/wavesurfer-wp" rel="nofollow ugc">GitHub</a>
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 <a href="https://wordpress.org/plugins/plugin-organizer/" rel="ugc">Plugin Organizer</a> or <a href="http://tomasz-dobrzynski.com/wordpress-gonzales" rel="nofollow ugc">Gonzales</a> 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 <a href="http://www.soundcloud.com" rel="nofollow ugc">SoundCloud</a> or <a href="http://www.hearthis.at" rel="nofollow ugc">Hearthis.at</a>, take a look at <a href="http://codecanyon.net/item/zoomsounds-neat-html5-audio-player/4525354" rel="nofollow ugc">ZoomSounds</a>. 
For other advanced WordPress integration of wavesurfer-js, you can check <a href="http://codecanyon.net/item/waveplayer-a-wordpress-audio-player/14349799" rel="nofollow ugc">WavePlayer</a> by luigipulcini or <a href="https://codecanyon.net/item/wavesurfer-plus-mp3-player-module-for-gmedia-plugin/19242349" rel="nofollow ugc">WaveSurfer-Plus</a> 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 <a href="http://wavesurfer-js.org/" rel="nofollow ugc">methods</a>, and that updates from the wavesurfer-js community will be pushed in WaveSurfer-WP regularly.
WordPress 5 and Guteberg: Inserting <code>[audio]</code> with Gutenberg doesn’t bring the <code>[audio]</code> 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.
<h4>WaveSurfer-WP Premium Add-on</h4>
A premium add-on is available to add extra features to WaveSurfer-WP.
<ul>
<li>
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.
</li>
<li>
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 <a href="https://www.extremraym.com/en/wavesurfer-wp-markers" rel="nofollow ugc">interactive audio transcripts</a>!
</li>
<li>
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.
</li>
<li>
TimeLine Plugin 
When activated thanks to a shortcode attribute, a customizable time ruler will appear below your waveform.
</li>
</ul>
You can buy it from the official <a href="https://www.extremraym.com/en/downloads/wavesurfer-wp-premium" rel="nofollow ugc">product page</a>. 
Thanks for considering this way to support WaveSurfer-WP !
<h3>Additional Infos</h3>
It is a port for WordPress of <a href="http://wavesurfer-js.org/" rel="nofollow ugc">WaveSurfer-js</a> by katspaugh.
It also contains <a href="http://danml.com/download.html" rel="nofollow ugc">Download-js</a> by dandavis.
<h3>Donators</h3>
Thanks to our generous donators for supporting this plugin development !
<ol>
<li><a href="http://signaltonoize.com/" rel="nofollow ugc">SignalToNoize.com</a></li>
<li><a href="http://theopod.com" rel="nofollow ugc">hawthonn</a></li>
<li><a href="http://soundpacks.com" rel="nofollow ugc">Rob</a></li>
<li><a href="http://robertgetzner.com/" rel="nofollow ugc">Robert Getzener</a></li>
</ol>
Do you want to contribute or sponsor one particular feature ? See you on the <a href="https://www.extremraym.com/en/donation/" rel="nofollow ugc">donation page</a>. Thanks !

WaveSurfer-WP

works fine

Customizable HTML5 Audio controller with waveform preview (mixed or split channels), using WordPress native audio and playlist shortcode.

Chartlet vs WaveSurfer-WP