nikan
/
jukebox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Wave now changes color as the song accent

pull/18/head
Nikan Dalvand 2019-07-25 22:17:28 +04:30
parent f83406447f
commit f4100bb105
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/renderer/layouts/PlayerBar.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<section class="player"> <section class="player">
<img class="artwork" src="/static/demo/artwork.jpg" /> <img @load="onArtworkLoad" class="artwork" src="/static/demo/starboy.png" />
<div> <div>
<p class="title">Perfidia</p> <p class="title">Perfidia</p>
<p class="artist">Nat King Cole</p> <p class="artist">Nat King Cole</p>
@ -13,10 +13,11 @@
<script> <script>
import WaveSurfer from 'wavesurfer.js' import WaveSurfer from 'wavesurfer.js'
import color from 'dominant-color'
export default { export default {
name: 'PlayerBar', name: 'PlayerBar',
mounted () { mounted () {
const wavesurfer = WaveSurfer.create({ this.wavesurfer = WaveSurfer.create({
container: '#visualizer', container: '#visualizer',
waveColor: '#c3c3c3', waveColor: '#c3c3c3',
progressColor: '#336cfb', progressColor: '#336cfb',
@ -27,10 +28,18 @@ export default {
height: 64, height: 64,
responsive: true responsive: true
}) })
wavesurfer.load('/static/demo/music.mp3') this.wavesurfer.load('/static/demo/music.mp3')
wavesurfer.on('ready', function () { this.wavesurfer.on('ready', function () {
// wavesurfer.play() // wavesurfer.play()
}) })
},
methods: {
onArtworkLoad () {
let img = this.$el.getElementsByTagName('img')[0]
color(img.src, (_, color) => {
this.wavesurfer.setProgressColor(`#${color}`)
})
}
} }
} }
</script> </script>