Added general layer for wavesurfer
parent
bf101c1ea9
commit
d41f96bfee
|
|
@ -10,8 +10,8 @@
|
|||
</div>
|
||||
<div class="control-buttons">
|
||||
<div class="play-pause-button" @click="togglePlay">
|
||||
<svg v-show="!isPlaying" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 29V15l12 9-12 9z"/></svg>
|
||||
<svg v-show="isPlaying" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-2 28h-4V16h4v16zm8 0h-4V16h4v16z"/></svg>
|
||||
<svg v-show="!playingStatus" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 29V15l12 9-12 9z"/></svg>
|
||||
<svg v-show="playingStatus" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-2 28h-4V16h4v16zm8 0h-4V16h4v16z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -38,7 +38,7 @@ export default {
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
isPlaying: false
|
||||
playingStatus: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -48,13 +48,27 @@ export default {
|
|||
this.wavesurfer.setProgressColor(`#${color}`)
|
||||
})
|
||||
},
|
||||
play () {
|
||||
this.wavesurfer.play()
|
||||
},
|
||||
pause () {
|
||||
this.wavesurfer.pause()
|
||||
},
|
||||
stop () {
|
||||
this.wavesurfer.stop()
|
||||
},
|
||||
toggleMute () {
|
||||
this.wavesurfer.toggleMute()
|
||||
},
|
||||
setPlaybackRate (rate) {
|
||||
this.wavesurfer.setPlaybackRate(rate)
|
||||
},
|
||||
isPlaying () {
|
||||
return typeof this.wavesurfer === 'undefined' ? false : this.wavesurfer.isPlaying()
|
||||
},
|
||||
togglePlay () {
|
||||
if (this.isPlaying) {
|
||||
this.wavesurfer.pause()
|
||||
} else {
|
||||
this.wavesurfer.play()
|
||||
}
|
||||
this.isPlaying = typeof this.wavesurfer === 'undefined' ? false : this.wavesurfer.isPlaying()
|
||||
this.wavesurfer.playPause()
|
||||
this.playingStatus = this.isPlaying()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue