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

本文为大家分享了vue中音频wavesurfer.js的使用方法，供大家参考，具体内容如下

效果图

首先引入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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。