Splash Audio Player WordPress Plugin
Customize and add a simple audio player anywhere on your site
by Greg Slonina · github.com/themugician/splash-audio-player-wp-plugin · website
Install
No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:
wp plugin install https://github.com/themugician/splash-audio-player-wp-plugin/archive/refs/heads/master.zipSplash Audio Player
A basic HTML audio player built with vanilla javascript and CSS.
Set up
Download the audio player javascript and CSS file or clone this repo
splash-audio-player.css
splash-audio-player.jsUsage
Add the audio player javascript and CSS file to your project
<link rel="stylesheet" href="splash-audio-player.css">
<script src="splash-audio-player.js"></script>To use the Plugin, create a new instance of SplashAudioPlayer when the DOM is ready to transform any HTML5 <audio> Element into a SplashAudioPlayer Instance.
<script>
window.addEventListener('load', (event) => {
new SplashAudioPlayer('.my-custom-audio-player')
})
</script>Use a unique class name or ID for your HTML <div> tag that wraps the <audio> tag.
<div class="my-custom-audio-player">
<audio src="https://sevenoceans.agency/khruangbin-pelota.mp3" preload="metadata">
</audio>
</div>Customizing styles and extending functionality
Most of the audio player elements are styled with CSS variables that can be easily changed at the top of the splash-audio-player.css file.