In this tutorial, we will show you how to create a custom audio player using Tailwindcss and Alpine.js.
I kept the backstory to 3 short paragraphs. I'll just assume you want to do this since you're here.
To Create Custom Card Audio Player here's what you need to do:
- Include Alpine.js
- Make the Card component with HTML markup and Tailwind CSS classes
- Add alpinejs code using
ref,event handler, andx-ondirective - That's it.
Step 1. Include Alpine.js (no-comment 😉)
<html>
<head>
...
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
</head>
...
</html>
Step 2. Make the Card component with HTML markup and Tailwind CSS classes
In this step we create the card image, insert an audio file using HTML5 audio tag and create the button to play and stop audio (using SVG icons).
<div class="min-h-screen bg-gray-50 py-6 flex flex-col justify-center items-center relative overflow-hidden sm:py-12">
<div class="h-80 w-80">
<button type="button" class="relative rounded-xl group cursor-pointer focus:outline-none focus:ring focus:ring-[#1F89AE]">
<div class="absolute inset-0 flex items-center justify-center p-8">
<div class="w-full h-full transition duration-300 ease-in-out bg-cyan-500 filter group-hover:blur-2xl"></div>
</div>
<img alt="card audio player" class="relative rounded-xl" src="https://source.unsplash.com/Esax9RaEl2I/400x400" />
<div class="absolute inset-0 flex items-center justify-center transition duration-200 ease-in-out bg-black rounded-xl bg-opacity-30 group-hover:bg-opacity-20">
<div class="bg-black bg-opacity-50 rounded-full p-0.5">
<svg class="w-12 h-12 text-white text-opacity-0 transition duration-150 ease-in-out hover:text-opacity-20" viewBox="0 0 284 284" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M184.197 129.243L135.177 96.5521C132.865 95.01 130.178 94.1249 127.403 93.9915C124.628 93.8581 121.868 94.4813 119.419 95.7946C116.971 97.1079 114.925 99.0619 113.501 101.448C112.077 103.834 111.327 106.562 111.333 109.34V174.706C111.333 177.482 112.086 180.206 113.513 182.588C114.939 184.969 116.985 186.919 119.433 188.228C121.881 189.538 124.638 190.158 127.411 190.024C130.183 189.889 132.867 189.004 135.177 187.463L184.197 154.773C186.297 153.373 188.019 151.475 189.21 149.25C190.401 147.025 191.024 144.54 191.024 142.015C191.024 139.491 190.401 137.006 189.21 134.781C188.019 132.555 186.297 130.658 184.197 129.258V129.243Z" fill="white"></path>
<path d="M280 142C280 160.122 276.431 178.067 269.495 194.81C262.56 211.553 252.395 226.766 239.581 239.581C226.766 252.395 211.553 262.56 194.81 269.495C178.067 276.431 160.122 280 142 280C123.878 280 105.933 276.431 89.1897 269.495C72.4468 262.56 57.2337 252.395 44.4193 239.581C31.6048 226.766 21.4398 211.553 14.5046 194.81C7.56947 178.067 4 160.122 4 142C4 105.4 18.5392 70.2993 44.4193 44.4193C70.2993 18.5392 105.4 4 142 4C178.6 4 213.701 18.5392 239.581 44.4193C265.461 70.2993 280 105.4 280 142Z" stroke="white" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<div class="bg-black bg-opacity-50 rounded-full p-0.5">
<svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 text-white text-opacity-0 transition duration-150 ease-in-out hover:text-opacity-20" viewBox="0 0 20 20" fill="white">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" clip-rule="evenodd" />
</svg>
</div>
</div>
</button>
<audio >
<source src="https://soundbible.com/mp3/meadowlark_daniel-simion.mp3" type="audio/mp3" />
</audio>
</div>
</div>
Step 3. Add alpinejs code
In this step, we create one function to work with our audio player. In playaudio() function we first initialize the currentlyPlayingstate to false so that our audio player doesn't play the music after the page loading.
We also add the playAndStop method to mange the click play event.
<script>
function playaudio() {
return {
currentlyPlaying: false,
//play and stop the audio
playAndStop() {
if (this.currentlyPlaying) {
this.$refs.audio.pause();
this.$refs.audio.currentTime = 0;
this.currentlyPlaying = false;
} else {
this.$refs.audio.play();
this.currentlyPlaying = true;
}
}
}
}
</script>
On the card component we add ref attribute to an <audio> element and playAndStop event handler to play()/ Stop() the audio file. We add also the x-show directive to display the play or stop icon.
<div class="min-h-screen bg-gray-50 py-6 flex flex-col justify-center items-center relative overflow-hidden sm:py-12">
<div x-data="playaudio()" class="h-80 w-80">
<button @keydown.tab="playAndStop" @click="playAndStop" type="button" class="relative rounded-xl group cursor-pointer focus:outline-none focus:ring focus:ring-[#1F89AE]">
<div class="absolute inset-0 flex items-center justify-center p-8">
<div class="w-full h-full transition duration-300 ease-in-out bg-cyan-500 filter group-hover:blur-2xl"></div>
</div>
<img alt="card audio player" class="relative rounded-xl" src="https://source.unsplash.com/Esax9RaEl2I/400x400" />
<div class="absolute inset-0 flex items-center justify-center transition duration-200 ease-in-out bg-black rounded-xl bg-opacity-30 group-hover:bg-opacity-20">
<div x-show="!currentlyPlaying" class="bg-black bg-opacity-50 rounded-full p-0.5">
<svg class="w-12 h-12 text-white text-opacity-0 transition duration-150 ease-in-out hover:text-opacity-20" viewBox="0 0 284 284" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M184.197 129.243L135.177 96.5521C132.865 95.01 130.178 94.1249 127.403 93.9915C124.628 93.8581 121.868 94.4813 119.419 95.7946C116.971 97.1079 114.925 99.0619 113.501 101.448C112.077 103.834 111.327 106.562 111.333 109.34V174.706C111.333 177.482 112.086 180.206 113.513 182.588C114.939 184.969 116.985 186.919 119.433 188.228C121.881 189.538 124.638 190.158 127.411 190.024C130.183 189.889 132.867 189.004 135.177 187.463L184.197 154.773C186.297 153.373 188.019 151.475 189.21 149.25C190.401 147.025 191.024 144.54 191.024 142.015C191.024 139.491 190.401 137.006 189.21 134.781C188.019 132.555 186.297 130.658 184.197 129.258V129.243Z" fill="white"></path>
<path d="M280 142C280 160.122 276.431 178.067 269.495 194.81C262.56 211.553 252.395 226.766 239.581 239.581C226.766 252.395 211.553 262.56 194.81 269.495C178.067 276.431 160.122 280 142 280C123.878 280 105.933 276.431 89.1897 269.495C72.4468 262.56 57.2337 252.395 44.4193 239.581C31.6048 226.766 21.4398 211.553 14.5046 194.81C7.56947 178.067 4 160.122 4 142C4 105.4 18.5392 70.2993 44.4193 44.4193C70.2993 18.5392 105.4 4 142 4C178.6 4 213.701 18.5392 239.581 44.4193C265.461 70.2993 280 105.4 280 142Z" stroke="white" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<div x-show="currentlyPlaying" class="bg-black bg-opacity-50 rounded-full p-0.5">
<svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 text-white text-opacity-0 transition duration-150 ease-in-out hover:text-opacity-20" viewBox="0 0 20 20" fill="white">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z" clip-rule="evenodd" />
</svg>
</div>
</div>
</button>
<audio x-ref="audio">
<source src="https://soundbible.com/mp3/meadowlark_daniel-simion.mp3" type="audio/mp3" />
</audio>
</div>
</div>
That's all, this is how to create a custom audio player using alpinejs. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.
Here's a CodePen where you can see it in action.
Resources :Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
🤩 Our Amazing Sponsors 👇
View Website
View Website
View Website
Comments (0)