怎么在vue中使用wavesurfer.js-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)怎么在vue中使用wavesurfer.js，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

從策劃到設(shè)計(jì)制作，每一步都追求做到細(xì)膩，制作可持續(xù)發(fā)展的企業(yè)網(wǎng)站。為客戶(hù)提供網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、網(wǎng)站策劃、網(wǎng)頁(yè)設(shè)計(jì)、域名與空間、網(wǎng)頁(yè)空間、網(wǎng)絡(luò)營(yíng)銷(xiāo)、VI設(shè)計(jì)、 網(wǎng)站改版、漏洞修補(bǔ)等服務(wù)。為客戶(hù)提供更好的一站式互聯(lián)網(wǎng)解決方案,以客戶(hù)的口碑塑造優(yōu)易品牌,攜手廣大客戶(hù),共同發(fā)展進(jìn)步。

首先引入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("開(kāi)始")
  console.log(this.wavesurfer)
  console.log("點(diǎn)擊開(kāi)始播放按鈕",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 
數(shù)據(jù)庫(kù)錄音格式 123.wav

關(guān)于怎么在vue中使用wavesurfer.js就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

文章題目：怎么在vue中使用wavesurfer.js-創(chuàng)新互聯(lián)
文章分享：http://bm7419.com/article26/ihpjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、動(dòng)態(tài)網(wǎng)站、定制網(wǎng)站、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)