Add an Audio Player to a Vue App with the xns-audio-player-simple Package

We can add a good look audio player to our Vue app with the xns-audio-player-simple package.

To install it, we run:

npm i xns-audio-player-simple

Then in main.js, we add:

import Vue from "vue";
import App from "./App.vue";
import XnsAudioPlayerSimple from "xns-audio-player-simple";

Vue.use(XnsAudioPlayerSimple);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount("#app");

We called Vue.use(XnsAudioPlayerSimple); to register the plugin.

Next, in App.vue, we write:

<template>
  <div id="app">
    <xns-audio-player-simple :playlist="playlist"></xns-audio-player-simple>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      playlist: [
        {
          audio:
            "https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3",
          artist: "singer",
          title: "music",
          album: "album",
          cover: "http://placekitten.com/200/200"
        }
      ]
    };
  }
};
</script>

We have a playlist array with the entries being objects with the audio property with the URL or path to the audio file.

artist has the artist name.

title has the audio title.

album has the album name.

cover has the cover image URL.

Then we should see an audio player with the cover image referenced by the URL.

We can play and pause the audio as we please.