vue中のオーディオwavesurfer.jsの使い方
4789 ワード
本論文では、Vueのオーディオwavesurfer.jsの使い方を共有します。参考にしてください。具体的な内容は以下の通りです。
効果図
まずwavesurfer.jsを導入します。
次にwavesurfer.jsをカプセル化します。
効果図
まずwavesurfer.jsを導入します。
次にwavesurfer.jsをカプセル化します。
<template>
<div class="waveformOuter">
<div id="waveform" ref="waveform" />
<div class="play" @click="playMusic">
<svg-icon v-if="!isPlaying" icon-class="play" class="icon myplay" />
<svg-icon v-else icon-class="stop" class="icon mystop" />
<p>{{ time }}</p>
</div>
<!-- <p>{{ url }}</p> -->
</div>
</template>
<script>
import WaveSurfer from '@/assets/js/wavesurfer'
export default {
props: ['url', 'toStopMusic', 'loadWave'],
data() {
return {
isPlaying: false,
time: '00:00',
wavesurfer: null,
}
},
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: 'violet',
progressColor: 'purple'
})
this.wavesurfer.load(this.url)
this.wavesurfer.on('ready', () => {
// this.wavesurfer.play()
})
this.wavesurfer.on('audioprocess', (e) => {
const times = Math.floor(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
debugger
this.wavesurfer.pause()
} else {
this.isPlaying = true
this.wavesurfer.play()
}
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.myplay{
position: absolute;
top: 50%;
font-size: 17px;
margin: -10px 0 0 -9px;
left: 50%;
}
.mystop{
position: absolute;
top: 50%;
margin: -15px 0 0 -18px;
left: 50%;
font-size: 25px;
}
#waveform{
width: calc(100% - 150px);
height:128px;
float: left;
margin-right: 22px;
background: black;
}
.play{
position: relative;
width: 128px;
height:128px;
border-radius:3px;
background-color:#EBEEF5;
float: left;
text-align: center;
}
.play p{
margin-top: 85px;
color: #3683FA;
}
.waveformOuter{
margin-bottom: 20px;
overflow: hidden;
}
</style>
そして必要なコンポーネントに導入します。
<div class="luyin" v-if="this.isYinyin">
<!-- {{this.isYinyin}} -->
<my-wave-sufer ref="handleDialogClose" :url="luyinUrl" :load-wave="showDialog" :to-stop-music="!showDialog" />
</div>
isYinyin: false,//
showDialog: true, //
luyinUrl: "", // url
123.wav
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。