vue-audio-play-controls
A Better Media Player for Vue.
This package is folked by danstans/vue-audio-visualizer
Installation
NPM or Yarn (recommended)
$ npm install --save vue-audio-play-controls
$ yarn add vue-audio-play-controlsIn your project
After installing via Yarn or NPM, use the following snippet in the script portion of the Vue component which you wish to render the Markdown.
import Vue from 'vue'
import AudioPlayControls from 'vue-audio-play-controls'
Vue.use(AudioPlayControls)
...Browser globals
The dist folder contains
vue-audio-play-controls.js.
<body>
<div>
<div class="content">
This is where you put the rest of your site
</div>
<audio-play-controls
avHeight="82px"
:playlist="playlist"
></audio-play-controls>
</div>
</body>
<script src="path/to/vue.js"></script>
<script src="path/to/vue-audio-play-controls.js"></script>
<script>
Vue.use(AudioPlayControls);
var vm = new Vue({
el: "body"
});
</script>Brief Use-case
<template>
<div id="app">
<div class="content">
This is where you put the rest of your site
</div>
<audio-play-controls
avHeight="82px"
:playlist="playlist"
:canvas="true"
></audio-play-controls>
</div>
</template>
<script>
export default {
data () {
return {
playlist: [
{
audioName: 'Agnes',
audioLive: '/static/agnes.mp3',
authorName: 'Glass Animals',
audioImg: 'https://pbs.twimg.com/profile_images/765322021060354048/0ppD4P6Y_400x400.jpg',
audioDuration: '3:55'
},
{
audioName: 'TaKillya (Baby Driver Soundtrack)',
audioLive: '/static/takillya.mp3',
authorName: 'Vinnie Maniscalco',
audioImg: 'https://adamology.net/wp-content/uploads/2017/07/Baby-Driver.jpg',
audioDuration: '3:46'
},
{
audioName: 'Kipod',
audioLive: '/static/kipod.mp3',
authorName: 'Infected Mushrrom',
audioImg: 'https://is4-ssl.mzstatic.com/image/thumb/Music/45/71/ff/mzi.mtqdovgf.jpg/1200x630bb.jpg',
audioDuration: '5:48'
},
{
audioName: 'Spitfire',
audioLive: '/static/spitfire.mp3',
authorName: 'Infected Mushrrom',
audioImg: 'https://is4-ssl.mzstatic.com/image/thumb/Music/45/71/ff/mzi.mtqdovgf.jpg/1200x630bb.jpg',
audioDuration: '7:15'
}
]
}
}
}
</script>Props
| Prop | Type | Default | Describe |
|---|---|---|---|
| avHeight | String | '82px' | The size of the media player at the bottom of the page. |
| playlist | Array | null |
The playlist data |
| canvas | Boolean | true | Enable/Disable the audio-visualizer component |