专门做孕婴用品的网站,无icp备案的网站合法吗,大学什么专业做网站,点子创意网HTML使用Wavesurfer.js
要使用wavesurfer.js#xff0c;首先需要在HTML文件中引入Wavesurfer.js库#xff0c;然后创建一个音频元素并将其添加到页面中。接下来#xff0c;初始化Wavesurfer实例并配置相关选项。以下是一个简单的示例#xff1a; 在HTML文件中引入Wavesurf…HTML使用Wavesurfer.js
要使用wavesurfer.js首先需要在HTML文件中引入Wavesurfer.js库然后创建一个音频元素并将其添加到页面中。接下来初始化Wavesurfer实例并配置相关选项。以下是一个简单的示例 在HTML文件中引入Wavesurfer.js库 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleWavesurfer.js 示例/title!-- 引入Wavesurfer.js库 --script srchttps://unpkg.com/wavesurfer.js/script
/head
body!-- 创建一个音频元素 --audio idaudio srcyour-audio-file.mp3/audio!-- 创建一个用于显示波形的容器 --div idwaveform/divscript// 获取音频元素和容器元素var audio document.getElementById(audio);var waveform document.getElementById(waveform);// 初始化Wavesurfer实例var wavesurfer WaveSurfer.create({container: #waveform, // 指定波形容器的IDwaveColor: violet, // 设置波形颜色progressColor: purple // 设置进度条颜色});// 当音频文件加载完成后开始播放并绘制波形audio.addEventListener(canplaythrough, function () {wavesurfer.load(audio);wavesurfer.play();});/script
/body
/html将your-audio-file.mp3替换为你要使用的音频文件路径。 打开浏览器查看效果。 Vue项目中使用Wavesurfer.js
打开终端或命令提示符。使用cd命令导航到Vue项目的根目录。运行以下命令来安装wavesurfer.js npm install wavesurfer.js --save
4. 在Vue组件中引入并使用wavesurfer.js。例如在components/YourComponent.vue文件中
templatediv!-- 在这里添加你的代码 --/div
/templatescript
import WaveSurfer from wavesurfer.js;export default {name: YourComponent,mounted() {this.initWavesurfer();},methods: {initWavesurfer() {const waveform document.getElementById(waveform);this.wavesurfer WaveSurfer.create({container: waveform,waveColor: violet,progressColor: purple});this.wavesurfer.load(this.audio);this.wavesurfer.play();}}
};
/script5.确保在HTML文件中有一个用于显示波形的容器例如
div idwaveform/div6.将音频文件添加到Vue组件的data属性中例如
data() {return {audio: your-audio-file.mp3};
}现在当你运行Vue项目时wavesurfer.js应该已经成功下载并在页面上显示波形。
案例一 templatediv stylepadding: 30pxdiv refwaveform_Ref/divdiv stylepadding: 30pxel-buttontypeprimarysizesmalliconel-icon-video-playclickplayMusicv-if!playing播放 /el-buttonel-buttonv-ifplayingtypeprimarysizesmalliconel-icon-video-pauseclickplayMusic暂停/el-button/div/div
/templatescript
import WaveSurfer from wavesurfer.js;export default {data() {return {wavesurfer: null,playing: false,};},mounted() {this.$nextTick(() {this.wavesurfer WaveSurfer.create({// 波形图的容器container: this.$refs.waveform_Ref,// 已播放波形的颜色// progressColor: red,// 未播放波形的颜色// waveColor: lightgrey,// 波形图的高度单位为px// height: 10,// 是否显示滚动条默认为false// scrollParent: true,// 波形的振幅高度默认为1// barHeight: 0.8,// 波形条的圆角// barRadius: 2,// 波形条的宽度// barWidth: 1,// 波形条间的间距// barGap: 3// 播放进度光标条的颜色// cursorColor: red,// 播放进度光标条的宽度默认为1// cursorWidth: 10,// 播放进度颜色// progressColor: blue,// 波形容器的背景颜色// backgroundColor: yellow,// 音频的播放速度// audioRate: 1,// 与区域插件一起使用启用所选区域的循环// loopSelection:false});const audioFile require(../assets/03.mp4);this.wavesurfer.load(audioFile);});},methods: {playMusic() {this.wavesurfer.playPause.bind(this.wavesurfer)();this.playing !this.playing;},},
};
/script
style scoped
/style 案例二 templatediv classmixin-components-containerel-rowel-card classbox-card styletext-align: leftdiv idwaveform refwaveform!-- Here be the waveform --/divdiv idwave-timeline refwave-timeline!--时间轴 --/divdiv classbuttonBoxel-button typeprimary clickrew后退/el-buttonel-button typeprimary clickplaysi classel-icon-video-play/i播放 /i classel-icon-video-pausee/i暂停/el-buttonel-button typeprimary clickspeek前进/el-buttonel-button typeprimary clickreplay重放/el-buttonel-tooltipclassitemeffectdarkcontent指定播放placementbottomel-popover placementtop width200 triggerclickel-inputv-modelappointTimeplaceholder请输入内容classinput-with-selectel-button slotappend clickappointPlay播放/el-button/el-inputel-button slotreference circle 指定播放 /el-button/el-popover/el-tooltipspanstyleborder: 2px solid #2f4f4f;margin-left: 8px;margin-right: 4px;/el-tooltipclassitemeffectdarkcontent音量placementbottomel-popoverplacementtop-starttriggerclickstylemin-width: 38px; margin-left: 10pxdiv classblock stylewidth: 42pxel-sliderv-modelvalueverticalheight100pxchangesetVolume//divel-button slotreference circle 音量 /el-button/el-popover/el-tooltipel-tooltipclassitemeffectdarkcontent播放倍速placementbottomel-popoverplacementtopwidth220triggerclickstylemargin-left: 10pxel-input-numberv-modeldswidth180:precision2:step0.1:min0.5:max2changeDoubleSpeed/el-button slotreference round{{ ds X }}/el-button/el-popover/el-tooltip/div/el-card/el-row/div
/template
script
import WaveSurfer from wavesurfer.js;
// import CursorPlugin from wavesurfer.js/dist/plugins/wavesurfer.cursor.js;
import Timeline from wavesurfer.js/dist/plugins/timeline.js;
export default {// name: Details,// components: { MyWaveSurfer },data() {return {wavesurfer: null,// 指定播放功能的播放时间点appointTime: 1,// 播放倍速ds: 1.0,// 设置音量value: 0,};},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,// },// }),// 时间轴插件Timeline.create({container: #wave-timeline,}),],});this.wavesurfer.on(error, function (e) {console.warn(e);});this.wavesurfer.load(require(../assets/03.mp4));});},methods: {// 播放时暂停播放时暂停plays() {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]);},},
};
/script
style scoped
.mixin-components-container {background-color: #f0f2f5;padding: 30px;min-height: calc(100vh - 84px);box-sizing: border-box;
}
.buttonBox {margin-top: 20px;display: flex;justify-content: center;
}
/style 我没找到wavesurfer.cursor.js文件就注释了
参考
Wavesurfer.js 生成音浪波形图(vue) - 简书
vue 绘制波形图 wavesurfer.js 音频/视频 【实用教程】_朝阳39的技术博客_51CTO博客
