在vue中使用音频wavesurfer.js较全解析
template>divclass="container">divclass="mixin-components-container">el-row>el-cardclass="box-card"style="text-align:left">divid="waveform"ref="waveform">div>...
·
npm install wavesurfer.js
template>
div class="container">
div class="mixin-components-container">
el-row>
el-card class="box-card" style="text-align:left">
div id="waveform" ref="waveform">
div>
div id="wave-timeline" ref="wave-timeline">
div>
div>
el-button type="primary" @click="rew">后退el-button>
el-button type="primary" @click="plays">
i class="el-icon-video-play">i>
播放
el-button>
el-button type="primary" @click="pause">
i class="el-icon-video-pause">i> 暂停el-button
>
el-button type="primary" @click="speek">前进el-button>
el-button type="primary" @click="replay">重放el-button>
el-tooltip
class="item"
effect="dark"
content="指定播放"
placement="bottom"
>
el-popover placement="top" width="200" trigger="click">
el-input
v-model="appointTime"
placeholder="请输入内容"
class="input-with-select"
>
el-button slot="append" @click="appointPlay">播放el-button>
el-input>
el-button slot="reference" circle>
指定播放
el-button>
el-popover>
el-tooltip>
span
style="border: 2px solid #2f4f4f;margin-left: 8px;margin-right: 4px"
/>
el-tooltip
class="item"
effect="dark"
content="音量"
placement="bottom"
>
el-popover
placement="top-start"
trigger="click"
style="min-width: 38px;margin-left: 10px"
>
div class="block" style="width: 42px">
el-slider
v-model="value"
vertical
height="100px"
@change="setVolume"
/>
div>
el-button slot="reference" circle>
音量
el-button>
el-popover>
el-tooltip>
el-tooltip
class="item"
effect="dark"
content="播放倍速"
placement="bottom"
>
el-popover
placement="top"
width="220"
trigger="click"
style="margin-left: 10px"
>
el-input-number
v-model="ds"
width="180"
:precision="2"
:step="0.1"
:min="0.5"
:max="2"
@change="DoubleSpeed"
/>
el-button slot="reference" round>
{{ ds + " X" }}
el-button>
el-popover>
el-tooltip>
div>
el-card>
el-row>
div>
div>
template>
script>
import WaveSurfer from "wavesurfer.js"; //导入wavesurfer.js
import Timeline from "wavesurfer.js/dist/plugin/wavesurfer.timeline.js"; //导入时间轴插件
import CursorPlugin from "wavesurfer.js/dist/plugin/wavesurfer.cursor.js";
import RegionsPlugin from "wavesurfer.js/dist/plugin/wavesurfer.regions.min.js";
export default {
name,
components: {},
data() {
// 这里存放数据
return {
wavesurfer: null,
// 指定播放功能的播放时间点
appointTime: 1,
// 播放倍速
ds: 1.0,
// 设置音量
value: 0,
};
},
created() {},
mounted() {
this.$nextTick(() => {
console.log(WaveSurfer);
this.wavesurfer = WaveSurfer.create({
// 应该在其中绘制波形的CSS选择器或HTML元素。这是唯一必需的参数。
container: this.$refs.waveform,
// 光标的填充颜色，指示播放头的位置。
cursorColor: "red",
// 更改波形容器的背景颜色。
backgroundColor: "gray",
// 光标后的波形填充颜色。
waveColor: "violet",
// 光标后面的波形部分的填充色。当progressColor和waveColor相同时，完全不渲染进度波
progressColor: "purple",
backend: "MediaElement",
// 音频播放时间轴
mediaControls: false,
// 播放音频的速度
audioRate: "1",
// 插件：此教程配置了光标插件和时间轴插件
plugins: [
// 光标插件
CursorPlugin.create({
showTime: true,
opacity: 1,
customShowTimeStyle: {
"background-color": "#000",
color: "#fff",
padding: "2px",
"font-size": "10px",
},
}),
RegionsPlugin.create(),
// 时间轴插件
Timeline.create({
container: "#wave-timeline",
}),
],
});
this.wavesurfer.on("error", function(e) {
console.warn(e);
});
this.wavesurfer.on("interaction ", function(e) {
console.warn(e);
});
// this.wavesurfer.addRegion({
id: id,
start: startime,
end: "endtime",
loop: false,
drag: false,
resize: false,
color: "rgba(254, 255, 255, 0.4)",
});
//标注某个区域
this.wavesurfer.addRegion({
id: 1,
start: "10",
end: "20",
loop: false,
drag: false,
resize: false,
color: "rgba(254, 255, 255, 0.4)",
});
this.wavesurfer.addRegion({
id: 2,
start: "30",
end: "60",
loop: false,
drag: false,
resize: false,
color: "rgba(253, 251, 25, 0.4)",
});
//总时常
let duration = parseInt(this.wavesurfer.getDuration());
console.log(duration);
console.log(this.wavesurfer.getCurrentTime());
this.wavesurfer.load(require("./../../assets/logo.mp3"));
// this.value = this.wavesurfer.getVolume() * 100
});
},
// 方法集合
methods: {
add() {
this.$store.commit("addcount", 1);
},
del() {
this.$store.commit("delcount", 1);
},
// 播放时暂停，播放时暂停
plays() {
this.wavesurfer.play();
},
//暂停
pause() {
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() {
console.log("点击倍数加减触发");
},
},
computed: {},
watch: {},
};
script>
style scoped>
/* @import url(); 引入公共css类 */
.mixin-components-container {
background-color: #f0f2f5;
padding: 30px;
min-height: calc(100vh - 84px);
}
style>
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)