#Audio playr update
To update the playbackTime property in time with the audio playback position, I added an event listener on the Audio/Video DOM “timeupdate” event. To get around this, I created a ‘playbackTime’ property in the Vue component and set up a combination of an event listener and a Vue watcher to automatically keep the audio object’s ‘currentTime’ property in sync with the AudioPlayer component’s local ‘playbackTime’ variable: However, we run into a bit of a snag here because there is no way to bind the input and display values directly to the Audio/Video DOM object. This sounds a lot like the familiar two-way data binding concept that reactive javascript frameworks like Vue and React are known for. Going in the other direction, we also want to audio play position to change whenever the user drags the slider to a new position. We need to capture these changes in order to show the progress bar that moves along with the audio playback. The trickiest part of this component is making it reactive to changes in the audio position as the audio plays.
#Audio playr code
For the demo, I’m simply using the CDN version of Tailwind using one line of code inserted into the block of my index.html: Making the Audio Player reactive to the audio play state If you want to use this straight out of the box, you’ll need to have Tailwind installed in your project. Note that I am using Tailwind CSS to define some of the styles used here. To use this component, you’ll need to import the AudioPlayer component and register it in your project’s main.js: import AudioPlayer from './AudioPlayer.vue' Vue.component('audio-player', AudioPlayer) įinally, to add the player to a page, include the tag, while passing the url for your mp3 file and an id for the audio element as props: You can see a working demo of my Vue AudioPlayer component here:
Using this, we can create a simple Play/Pause button in Vue by attaching our toggleAudio() method to a button event like so: Play/Pause Your browser does not support the audio tag. As a quick example of how it works, the toggleAudio() method shown below can be used to toggle audio playback between play and paused states. The HTML Audio/Video DOM contains all of the methods, properties and events that we need to control the playback of audio on the page. create methods in javascript to trigger audio events on the HTML Audio/Video DOM.design the buttons, etc for the player in HTML and CSS.Add the default tag to the page (hidden with style=“display:none”).Since I was already using Vue.js for most of the frontend for my site, I decided to build my own Mp3 audio player as a Vue component.Īt the highest level, the basic steps for building the audio player will be to:
Even worse, every browser renders the player somewhat differently, making it nearly impossible to reliably customize the player to match your site. The tag is also supported by nearly every modern browser, so you don’t have to worry about compatability on older browsers, mobile browsers, etc.īut the downside is that it is nearly impossible to style the look and feel of the style player. The advantage of using the default HTML audio player is that it makes it ridiculously easy to add a usable audio player to your site. Default HTML Audio Player in Chrome Desktop
0 kommentar(er)
