600字范文 > vue音频wavesurfer波形图

vue音频wavesurfer波形图

时间：2022-01-12 22:13:07

相关推荐

vue音频wavesurfer波形图

1.效果图

2.npm install wavesurfer.js

3.main.js或者使用组件内引入

import WaveSurfer from 'wavesurfer.js'import CursorPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.cursor.js'import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js'

<template><div class="mixin-components-container" style="width: 100%;"><div class="box-card" style="width:100%;text-align:left;background: #43444c;height:210px;"><div id="wave-timeline" ref="wave-timeline" style="margin-top: 20px;"></div><div id="waveform" ref="waveform"></div><div style="margin-top: 10px;padding-bottom: 10px;"><el-select v-model="ds" placeholder="请选择播放速度" @change="DoubleSpeed"style="float: left;background: #363740;color:#bfc0dc;margin-left: 10px;"><el-option v-for="item in audiominmax" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select><i class="el-icon-microphone" title="音量"style="float: left;margin-left: 30px;margin-right: 14px;margin-top: 5px;cursor: pointer;font-size:24px;color:#bfc0dd;"></i><el-slider v-model="value" @change="setVolume" input-size="mini"style="width:100px;float: left;margin-right:30px;cursor: pointer;" /><i class="el-icon-d-arrow-left" @click="rew" alt="" title="快退"style="float: left;margin-top: 11px;margin-left: 10px;cursor: pointer;font-size:20px;color:#bfc0dd;"></i><i class="el-icon-arrow-left" title="上一个"style="float: left;margin-top: 11px;margin-left: 10px;cursor: pointer;font-size:20px;color:#bfc0dd;"></i><i class="el-icon-video-play" v-if="audioplay" @click="plays" alt="" title="播放"style="float: left;margin-top: 11px;margin-left: 4px;cursor: pointer;font-size:20px;color:#bfc0dd;"></i><i class="el-icon-video-pause" v-if="!audioplay" @click="plays" alt="" title="暂停"style="float: left;margin-top: 11px;margin-left: 4px;cursor: pointer;font-size:20px;color:#bfc0dd;"></i><i class="el-icon-arrow-right" title="下一个"style="float: left;margin-top: 11px;margin-left: 10px;cursor: pointer;font-size:20px;color:#bfc0dd;"></i><i class="el-icon-d-arrow-right" @click="speek" alt="" title="快进"style="float: left;margin-top: 11px;margin-left: 6px;cursor: pointer;font-size:20px;color:#bfc0dd;"></i><i class="el-icon-refresh" @click="replay" alt="" title="重放"style="float: left;margin-top: 11px;margin-left: 20px;cursor: pointer;font-size:20px;color:#bfc0dd;"></i></div></div></div></template><script>import WaveSurfer from 'wavesurfer.js'import CursorPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.cursor.js'import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js'export default {name: "Details",// components: { MyWaveSurfer },data() {return {audiominmax: [{value: 1.50,label: '播放速度 150%'}, {value: 1.20,label: '播放速度 120%'}, {value: 1.00,label: '播放速度 100%'}, {value: 0.50,label: '播放速度 50%'}],wavesurfer: null,// 指定播放功能的播放时间点appointTime: 1,// 播放倍速ds: 1.00,// 设置音量value: 30,audioplay: true,};},beforeDestroy(){this.wavesurfer.destroy();},mounted() {let that=this;this.$nextTick(() => {console.log(WaveSurfer)this.wavesurfer = WaveSurfer.create({// 应该在其中绘制波形的CSS选择器或HTML元素。这是唯一必需的参数。container: this.$refs.waveform,// 更改波形容器的背景颜色。backgroundColor: '#000000',backend: 'MediaElement',//走动指针线颜色cursorColor: "red",//频率背景颜色waveColor: '#42d995',//走动颜色progressColor: "#42d995",// 音频播放时间轴mediaControls: false,// 播放音频的速度audioRate: '1',// 插件：此教程配置了光标插件和时间轴插件plugins: [// 光标插件CursorPlugin.create({showTime: true,opacity: 0,customShowTimeStyle: {'background-color': '#000',color: '#fff',padding: '2px','font-size': '10px'}}),// 时间轴插件Timeline.create({container: '#wave-timeline'}),]});this.wavesurfer.on('ready', function(e) {console.warn('加载成功---',e);that.plays();that.wavesurfer.setVolume(30 / 100)});this.wavesurfer.on('finish', function(e) {console.warn('播放结束---',e);// that.plays();that.audioplay = true;});this.wavesurfer.on('error', function(e) {console.warn(e);});this.wavesurfer.load(require("../../mp3/tizzy.mp3"));// this.value = this.wavesurfer.getVolume() * 100})},methods: {// 播放时暂停，播放时暂停plays() {this.audioplay = !this.audioplay;this.wavesurfer.playPause()},// 后退，rew() {this.wavesurfer.skip(-3)},// 前进，speek() {this.wavesurfer.skip(3)},// 重放replay() {this.wavesurfer.stop()},// 设置音量：setVolume(val) {this.wavesurfer.setVolume(val / 100)},// 指定播放appointPlay() {this.wavesurfer.play([this.appointTime, ])},//倍速播放DoubleSpeed(rate) {this.wavesurfer.setPlaybackRate(rate)console.log(rate)}}}</script><style scoped>/deep/ .el-input__inner {background-color: #363740;border: 1px solid #797979;color: #aeafc8;}</style>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。