Vue Audio Player

August 2019

Project Images for Vue Player
Project Images for Vue Player

A test audio player made with Vue

  • Built with Vue.js
  • HTML5 player and controls
  • WordPress REST API feeding content and audio

Summary

Exploring Vue.js, in the form of an audio player, using the podcast website I built for SportsLit.

Podcast episodes and content are being pulled from the main WordPress website, using the WP REST API.

The post list and audio player are two Vue components communicating with each other through the main Vue app. Fetch() is used to grab audio files, which are played using the standard HTML5 audio player. Using typical HTML/CSS techniques.

Future explorations:

  • Deeper Vue component transitions
  • Implementing VueX and seeing what it could do here
  • Possibly using Axios as HTTP handler for better handling than native Fetch
  • Making this app a PWA
  • Implementing more advanced player controls
  • Improving a UI framework