系統城裝機大師 - 唯一官網:www.farandoo.com!

當前位置:首頁 > 網絡編程 > JavaScript > 詳細頁面

vue中音頻wavesurfer.js的使用方法

時間:2020-02-20來源:系統城作者:電腦系統城

本文為大家分享了vue中音頻wavesurfer.js的使用方法,供大家參考,具體內容如下

效果圖

vue中音頻wavesurfer.js的使用方法

首先引入wavesurfer.js

vue中音頻wavesurfer.js的使用方法

其次 封裝 wavesurfer.js`


 
  1. <template>
  2. <div class="waveformOuter">
  3. <div id="waveform" ref="waveform" />
  4. <div class="play" @click="playMusic">
  5. <svg-icon v-if="!isPlaying" icon-class="play" class="icon myplay" />
  6. <svg-icon v-else icon-class="stop" class="icon mystop" />
  7. <p>{{ time }}</p>
  8. </div>
  9. <!-- <p>{{ url }}</p> -->
  10. </div>
  11. </template>
  12. <script>
  13. import WaveSurfer from '@/assets/js/wavesurfer'
  14. export default {
  15. props: ['url', 'toStopMusic', 'loadWave'],
  16. data() {
  17. return {
  18. isPlaying: false,
  19. time: '00:00',
  20. wavesurfer: null,
  21. }
  22. },
  23. watch: {
  24. 'loadWave': function() {
  25. this.loadMusic()
  26. },
  27. 'url': function() {
  28. // return this.wavesurfer.getCurrentTime()
  29. this.loadMusic(true)
  30. console.log('url---------------------------------------')
  31. },
  32. 'toStopMusic': function() {
  33. console.log('toStopMusic---------------------------------------')
  34. if (this.wavesurfer) {
  35. this.wavesurfer.pause()
  36. }
  37. }
  38. },
  39. mounted() {
  40. this.$nextTick(() => {
  41. if (this.loadWave) {
  42. console.log('haha')
  43. this.loadMusic()
  44. }
  45. })
  46. },
  47. methods: {
  48. itemClick(node) {
  49. console.log(node.model.id)
  50. },
  51. buZero(num) {
  52. return num > 9 ? num : '0' + num
  53. },
  54. loadMusic(bool) {
  55. console.log('this.WaveSurfer--------------------------------------', WaveSurfer)
  56. if (this.wavesurfer) {
  57. if (bool) {
  58. this.time = '00:00'
  59. this.wavesurfer.load(this.url)
  60. }
  61. } else {
  62. this.wavesurfer = WaveSurfer.create({
  63. container: this.$refs.waveform,
  64. waveColor: 'violet',
  65. progressColor: 'purple'
  66. })
  67. this.wavesurfer.load(this.url)
  68. this.wavesurfer.on('ready', () => {
  69. // this.wavesurfer.play()
  70. })
  71. this.wavesurfer.on('audioprocess', (e) => {
  72. const times = Math.floor(e)
  73. this.time = this.buZero(Math.floor(times / 60)) + ':' + this.buZero(times % 60)
  74. })
  75. this.wavesurfer.on('finish', () => {
  76. this.isPlaying = false
  77. })
  78. }
  79. },
  80. stopMusic(){
  81. if (this.wavesurfer) {
  82. this.wavesurfer.stop();
  83. }
  84. },
  85. playMusic() {
  86. console.log("開始")
  87. console.log(this.wavesurfer)
  88. console.log("點擊開始播放按鈕",this.url)
  89. if (this.wavesurfer) {
  90. if (this.wavesurfer.isPlaying()) {
  91. this.isPlaying = false
  92. debugger
  93. this.wavesurfer.pause()
  94. } else {
  95. this.isPlaying = true
  96. this.wavesurfer.play()
  97. }
  98. }
  99. }
  100. }
  101. }
  102. </script>
  103.  
  104. <!-- Add "scoped" attribute to limit CSS to this component only -->
  105. <style scoped>
  106. .myplay{
  107. position: absolute;
  108. top: 50%;
  109. font-size: 17px;
  110. margin: -10px 0 0 -9px;
  111. left: 50%;
  112. }
  113. .mystop{
  114. position: absolute;
  115. top: 50%;
  116. margin: -15px 0 0 -18px;
  117. left: 50%;
  118. font-size: 25px;
  119. }
  120. #waveform{
  121. width: calc(100% - 150px);
  122. height:128px;
  123. float: left;
  124. margin-right: 22px;
  125. background: black;
  126. }
  127. .play{
  128. position: relative;
  129. width: 128px;
  130. height:128px;
  131. border-radius:3px;
  132. background-color:#EBEEF5;
  133. float: left;
  134. text-align: center;
  135. }
  136. .play p{
  137. margin-top: 85px;
  138. color: #3683FA;
  139. }
  140.  
  141. .waveformOuter{
  142. margin-bottom: 20px;
  143. overflow: hidden;
  144. }
  145. </style>

再然后 在需要的組件中引入


 
  1. <div class="luyin" v-if="this.isYinyin">
  2. <!-- {{this.isYinyin}} -->
  3. <my-wave-sufer ref="handleDialogClose" :url="luyinUrl" :load-wave="showDialog" :to-stop-music="!showDialog" />
  4. </div>
  5. isYinyin: false,//是否加載錄音組件
  6. showDialog: true, //是否初始化錄音組件
  7. luyinUrl: "", //錄音url
  8. 數據庫錄音格式 123.wav

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持我們。

分享到:

相關信息

系統教程欄目

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載

jlzzjlzz亚洲乱熟在线播放