<template> <div class="waveformOuter" v-loading="!ifLoaded"> <div class="palyWrapper"> <div class="play" @click="playMusic"> <i class="fa fa-play-circle-o" aria-hidden="true" v-if="!isPlaying" title="播放"></i> <i class="fa fa-stop-circle-o" aria-hidden="true" v-else title="停止"></i> </div> </div> <div id="waveform" ref="waveform" /> <div class="time">{{ time }}</div> <!-- <p>{{ url }}</p> --> </div></template><script>import WaveSurfer from "wavesurfer";export default { props: { url: { type: String, default: "", }, color: { type: String, default: "black", }, utoStopMusicrl: { type: Boolean, default: true, }, loadWave: { type: Boolean, default: true, }, }, data() { return { isPlaying: false, time: "00:00", totalTime: 0, wavesurfer: null, ifLoaded: false, }; }, watch: { loadWave: function () { this.loadMusic(); }, url: function () { // return this.wavesurfer.getCurrentTime() this.loadMusic(true); console.log("url---------------------------------------"); }, toStopMusic: function () { console.log("toStopMusic---------------------------------------"); if (this.wavesurfer) { this.wavesurfer.pause(); } }, }, mounted() { this.$nextTick(() => { if (this.loadWave) { console.log("haha"); this.loadMusic(); } }); }, methods: { itemClick(node) { console.log(node.model.id); }, buZero(num) { return num > 9 ? num : "0" + num; }, loadMusic(bool) { console.log( "this.WaveSurfer--------------------------------------", WaveSurfer ); if (this.wavesurfer) { if (bool) { this.time = "00:00"; this.wavesurfer.load(this.url); } } else { this.wavesurfer = WaveSurfer.create({ container: this.$refs.waveform, waveColor: "#fff", progressColor: this.color, barWidth: 2, height: 50, }); this.wavesurfer.load(this.url); this.wavesurfer.on("ready", () => { // this.wavesurfer.play() this.ifLoaded = true; this.totalTime = this.wavesurfer.getDuration(); console.log(this.totalTime); }); this.wavesurfer.on("audioprocess", (e) => { const times = Math.floor(this.totalTime - e); this.time = this.buZero(Math.floor(times / 60)) + ":" + this.buZero(times % 60); }); this.wavesurfer.on("finish", () => { this.isPlaying = false; }); } }, stopMusic() { if (this.wavesurfer) { this.wavesurfer.stop(); } }, playMusic() { console.log("开始"); console.log(this.wavesurfer); console.log("点击开始播放按钮", this.url); if (this.wavesurfer) { if (this.wavesurfer.isPlaying()) { this.isPlaying = false; this.wavesurfer.pause(); } else { this.isPlaying = true; this.wavesurfer.play(); } } }, },};</script><!-- Add "scoped" attribute to limit CSS to this component only --><style lang="scss" scoped>.waveformOuter { width: 100%; height: 100%; display: flex; overflow: hidden; #waveform { flex-grow: 1; // float: left; background: transparent; display: flex; align-items: center; } .palyWrapper { width: 50px; display: flex; justify-content: center; align-items: center; .play { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; font-size: 33px; } } .time { // width: 50px; height: 100%; display: flex; align-items: center; } /deep/wave { width: 100%; border: none !important; }}</style>
<wave-surfer :url="src" color="#fd5166"></wave-surfer>
wavesurfer文档参考
