vue使用wavesurfer.js解決音頻可視化播放問題
更新時間：2022年04月04日 09:58:05 作者：松南路Rachel
Wavesurfer.js是一款基于HTML5?canvas和Web?Audio的聲紋可視化插件，功能十分強(qiáng)大，在Vue框架中嵌入使用該插件，今天重點給大家介紹下vue使用wavesurfer.js解決音頻可視化播放問題，感興趣的朋友一起看看吧
之前給大家介紹過vue中音頻wavesurfer.js的使用方法，感興趣的朋友可以點擊查看，今天繼續(xù)給大家普及vue解決音頻可視化播放，使用wavesurfer.js問題，效果圖如下所示：
上效果：
1.安裝wavesurfer
npm install wavesurfer.js
2.在頁面導(dǎo)入
import WaveSurfer from 'wavesurfer.js'
注:我沒有使用時間軸，所以沒有引入，如果需要再引入
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js'
3.上源碼
<template>
<el-row>
<el-card class="card" :body-style="{ padding: '10px' }">
<div id="waveform" ref="waveform">
</div>
</el-card>
</el-row>
<div>
<el-button type="primary" @click="playMusic">
<i class="el-icon-video-play"></i>
播放 /
<i class="el-icon-video-pausee"></i>
暫停
</el-button>
</template>
<script>
import WaveSurfer from "wavesurfer.js";
// import Timeline from "wavesurfer.js/dist/plugin/wavesurfer.timeline.js";
export default {
name: "Details",
data() {
return {
wavesurfer: null,
};
},
mounted() {
this.$nextTick(() => {
this.wavesurfer = WaveSurfer.create({
container: this.$refs.waveform,
// waveColor: '#409EFF',
barWidth: 1,
cursorColor: "black",
progressColor: "blue",
backend: "MediaElement",
// mediaControls: false,
audioRate: "1",
//使用時間軸插件
});
// 特別提醒：此處需要使用require(相對路徑)，否則會報錯
this.wavesurfer.load(require("../mp3/living.mp3"));
});
methods: {
playMusic() {
//"播放/暫停"按鈕的單擊觸發(fā)事件，暫停的話單擊則播放，正在播放的話單擊則暫停播放
this.wavesurfer.playPause.bind(this.wavesurfer)();
},
};
</script>
<style >
.mixin-components-container {
width: 100% !important;
#f0f2f5;
padding: 30px;
/* min-height: calc(100vh - 84px); */
}
.el-card__body {
height: 70px !important;
padding: 0 auto !important;
.card {
height: 70px;
#waveform {
wave {
height: 50px !important;
</style>4.注釋：
這個插件實在太吊了，官方文檔太厲害，上鏈接：https://wavesurfer-js.org/
我用到了幾個方法：
4.1.
this.wavesurfer.play(0, 212); 指定開始時間和結(jié)束時間，以秒為單位，0秒開始，212秒結(jié)束
4.2.
this.wavesurfer.on("pause", () => {
console.log('我暫停了')
});監(jiān)聽暫停
4.3.
this.wavesurfer.load(require("../mp3/living.mp3")); 讀取目錄路徑里面的Mp3文件，可以測試用
this.wavesurfer.load('xxx.mp3')); 讀取網(wǎng)絡(luò)地址，有接口就用這個到此這篇關(guān)于vue使用wavesurfer.js解決音頻可視化播放的文章就介紹到這了,更多相關(guān)vue音頻可視化播放內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于腳手架創(chuàng)建Vue項目實現(xiàn)步驟詳解
這篇文章主要介紹了基于腳手架創(chuàng)建Vue項目實現(xiàn)步驟詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08
本篇文章主要介紹了詳解vue-cli中配置sass ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要為大家詳細(xì)介紹了vue.js實現(xiàn)回到頂部動畫效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
本篇文章主要介紹了詳解在Vue中通過自定義指令獲取dom元素 ，具有一定的參考價值，有興趣的可以了解一下。2017-03-03
在本篇文章里小編給大家整理的是一篇關(guān)于Vue組件中使用防抖和節(jié)流實例分析內(nèi)容，有需要的朋友們可以學(xué)習(xí)參考下。2021-11-11
vue與iframe頁面數(shù)據(jù)互相通信的實現(xiàn)示例
這篇文章主要給大家介紹了vue與iframe頁面數(shù)據(jù)互相通信的實現(xiàn)示例,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue在.js文件中引入store和router問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue+element項目實時監(jiān)聽div寬度的變化
這篇文章主要介紹了vue+element項目里實時監(jiān)聽某個div寬度的變化,然后執(zhí)行相應(yīng)的事件,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-08-08
這篇文章主要介紹了Vue3 編寫自定義指令插件的示例代碼,主要包括編寫自定義插件，在 main.ts 中加載啟用插件的代碼介紹，對Vue3自定義指令插件相關(guān)知識感興趣的朋友一起看看吧2022-07-07
這篇文章主要介紹了詳解vuex的簡單使用,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03