vue-mamicplayer v2.0.3
vue-MamicPlayer
Introduction
MamicPlayer is Nexmamic platform lovely Player
It has two modes, full screen and floating
(Nexmamic is a music creation sharing platform in China)
Let's have a look:
Install
yarn add vue-mamicplayer
#OR
npm install vue-mamicplayer
Vue
Add code to main.js
import MamicPlayer from 'vue-mamicplayer'
const Player = {
install(Vue) {
Vue.component('Player', MamicPlayer)
Vue.prototype.Player = {
playlist: [],
updatePlaylist(data) {
this.playlist = data
}
}
}
}
Vue.use(Player)
Nuxt
Create a plugin file for MamicPlayer, plugins/MamicPlayer.js
with the below content:
import Vue from 'vue'
import MamicPlayer from 'vue-mamicplayer'
const Player = {
install(Vue) {
Vue.component('Player', MamicPlayer)
// This is added to facilitate the use of other page
Vue.prototype.Player = {
playlist: [],
updatePlaylist(data) {
this.playlist = data
}
}
}
}
Vue.use(Player)
Once installed, update your nuxt.config.js
file to include the Vuetify module in the build.
{
plugins: [
{ src: '@/plugins/MamicPlayer', ssr: false }
]
}
Usage
<template>
...
<Player />
</template>
Config
parameter:
Name | type | default | description |
---|---|---|---|
defaultCover | String | If the playlist is empty, display this picture | |
playlist | Array | playlist | |
localplw | Boolean | true | Whether to save the music to be played localStorage |
dse | Boolean | false | Disable background effects? |
supportControlList | Boolean | false | Whether to support deleting songs in the list, corresponding to the event deleteMusic |
noLyricText | String | No lyrics, please enjoy | Text to display without lyrics |
event:
event name | return | description |
---|---|---|
onMusic | Music Info | When the player is shown in full screen, the user clicks on the music name |
onArtist | Music Info | When the player is shown in full screen, the user clicks on the artist name |
updateData | Music Info | Request to refresh the music list |
deleteMusic | Which item in the list | Request to delete the nth music in the music list |
playlist format:
[
{
//artist name
"artist": "Amatke31",
//music cover url
"cover": "/img/1.png",
//music name
"name": "dual existence(remox)",
//music source url
"source": "/music/1.wav",
//Lyrics file URL (optional)
"lyric": "/lyric/1.lrc",
//and other you want
//this will not affect the Player
//like music url?
"music_url": "https://www.nexmamic.com/Music/4"
},
{
"artist": "Zhou",
"cover": "/img/2.png",
"name": "He's a pirate",
"source": "/music/2.wav",
"artist_url": "https://www.nexmamic.com/Users/1"
}
]
eleteMusic event:
Put the following code into the layout Vue
<template>
...
<Player
...
:playlist="playlist"
:supportControlList="true"
@deleteMusic="deleteMusic"
...
/>
...
</template>
export default {
...
methods: {
...
deleteMusic: function (num) {
this.Player.playlist.splice(num,1)
this.playlist = this.Player.playlist
},
...
}
}
example
Next, we will show a more complete project
app.vue
<template>
...
<Player
defaultCover="/favicon.ico"
:playlist="playlist"
:localplw="plw"
:supportControlList="true"
@pressMusicName="goMusic"
@pressArtistName="goArtist"
@updateData="update"
@deleteMusic="deleteMusic"
/>
</template>
<script>
export default {
data: function () {
return {
playlist: [],
plw: true,
};
},
beforeMount() {
// Create a play list locally
// format: [1,2,3]
if (localStorage.getItem("Player_list")) {
} else {
localStorage.setItem("Player_list", "[]");
}
},
mounted() {
// Get playlist from localStorage
var playlist_num = JSON.parse(localStorage.getItem("Player_list"));
var playlist = new Array();
var getPlayerListInfo = [];
if (playlist_num.length) {
playlist_num.forEach(async (item, index) => {
getPlayerListInfo[index] = new Promise((resolve) => {
//Request API
this.$axios({
url: "/Music/info",
method: "get",
params: {
id: item,
},
}).then((res) => {
res = res.data;
var info = new Object();
info.name = res.music_name;
info.artist = res.music_artistname;
info.source = "/Music/" + res.music_id + "/" + res.file_music;
info.cover = "/MusicCover/" + res.music_id + "/" + res.file_cover;
info.lyric = "/Lyric/" + res.music_id + "/" + res.file_lyric;
info.artist_url = "/Users/" + res.music_artist;
info.music_url = "/Music/" + res.music_id;
resolve(info);
});
});
});
Promise.all(getPlayerListInfo).then((message) => {
playlist = message;
// Change global variables for easy access
this.Player.updatePlaylist(playlist);
// Change playlist
this.playlist = this.Player.playlist;
});
}
},
methods: {
goMusic: function (id) {
// Go to song page
this.$router.push(id.music_url);
},
goArtist: function (id) {
// Go to artist page
this.$router.push(id.artist_url);
},
update: function () {
// Refresh data
if (this.Player.playlist.length) {
this.playlist = this.Player.playlist;
}
},
deleteMusic: function (num) {
this.Player.playlist.splice(num,1)
this.playlist = this.Player.playlist
// Save to localstorage
var locallist = new Array();
for(var i = 0; this.playlist[i]; i++){
locallist[i] = this.playlist[i].id
}
localStorage.setItem("Player_list", JSON.stringify(locallist));
},
}
}
</script>
in other page
musicPage.vue
<template>
...
<div v-on:click="addToList()">
add to playlist
</div>
...
</template>
<script>
export default {
...
methods: {
addToList() {
// get music id list from localStorage
var locallist = JSON.parse(localStorage.getItem("Player_list"));
if (locallist.indexOf(parseInt(this.$route.params.id)) == -1) {
var playlist = [];
var info = {};
info.name = this.music_name;
info.artist = this.user_name;
info.source = "/Music/" + this.music_id + "/" + this.source;
info.cover = "/MusicCover/" + this.music_id + "/" + this.cover;
info.lyric = "/Lyric/" + this.music_id + "/" + this.lyric;
info.artist_url = "/Users/" + this.music_artist;
info.music_url = "/Music/" + this.music_id;
playlist = this.Player.playlist;
playlist.push(info);
locallist.push(parseInt(this.$route.params.id));
// Update to global
this.Player.updatePlaylist(playlist);
// Update music id list to localStorage
localStorage.setItem("Player_list", JSON.stringify(locallist));
} else {
alert("Already in the play list!");
}
},
},
...
}
</script>
Author
MamicPlayer © Nexmamic, Released under the Apache 2.0 License
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago