Vue.js Media Player Tutorial

Vue.js often gets used for large, single-page applications (SPAs). While it excels at these, especially with incredible tools like vue-router and vuex to intelligently manage routes and state, Vue.js also shines as an embedded interactive application or widgets. These often get used in otherwise static websites where a small piece of interaction is required. Personally, I've used Vue.js to build one-off photo sliders, navigation menus, tabbed boxes, dynamic form wizards, modals, data tables, and much more. In this tutorial we're going to build a tiny, yet fully-functional audio player.

The first step in any project is to define the requirements. Our media player will hold a list of MP3 files that the user can play. They should be able to select which song they'd like to listen to, and the player should progress to the next song when the current one finishes. It should highlight the active song. There should be controls to pause and play the music as well as indicating its status. Finally, the user should be able to control the volume from the player.

HTML5 already gives us a basic audio element that does most of what we need. It does not show a list of songs, and it does not allow for CSS customizations. That's why we are building our own player.

This tutorial is written and published using a new programming tutorial concept.

Continue reading the tutorial here.

Or check out the Vue.js media player demo.