音频插件使用（wavesurfer.js）

html:

<div id="waveform" style="height: 130px; margin: 0 15px;"></div><div class="operate-btn"><img onclick="rew()" title="后退" style="height: 54px;" src="/images/audio-back.png" /><img onclick="plays()" id="status" class="layui-anim layui-anim-scale" style="height: 80px;margin: 0 20px;"src="/images/audio-start.png" /><img onclick="forward()" title="前进" style="height: 54px;" src="/images/audio-front.png" /></div>

js:

var wavesurfer = WaveSurfer.create({container: '#waveform',cursorColor: 'transparent',  // 光标的填充颜色waveColor: '#0B6CC8', // 光标后的波形填充颜色backgroundColor: '#000000',  // 波形容器的背景颜色progressColor: '#004281',  // 光标后面的波形部分的填充色barGap: 8,  // 间距barRadius: 3,barWidth: 6,// height: 40,// backend: 'MediaElement',// xhr: {//     mode: "no-cors"// }});// wavesurfer.load(urlAll + filePath); // 加载服务器路径wavesurfer.load('/images/bensound-acousticbreeze.mp3');  // 加载本地路径// 音频加载成功时的监听事件// wavesurfer.on('ready', function () {//     wavesurfer.play();// });// 加载错误时的监听事件wavesurfer.on('error', err => {console.warn(err);})//音频暂停时的监听事件wavesurfer.on('pause', function () {// wavesurfer.params.container.style.opacity = 0.9;//识别到监听事件后，需要执行的操作});//音频完成播放时的监听事件wavesurfer.on('finish', function () {});// 播放时暂停，播放时暂停function plays() {wavesurfer.playPause();if (flag == false) {$("#status").attr("src", "/images/audio-pause.png")flag = true} else if (flag == true) {$("#status").attr("src", "/images/audio-start.png")flag = false}}// 后退function rew() {wavesurfer.skip(-3)}// 前进function forward() {wavesurfer.skip(3)}

效果如下

此处需要注意一点，加载本地音频正常，当加载服务器路径时，即使后台设置了跨域，也会出现如下跨域问题

搜索了很多文章，加上下面几行代码可以解决跨域问题，可以正常播放音频，但是会出现波形效果不显示的问题

backend: 'MediaElement',
xhr: {mode: "no-cors"
}

网上说这个还是因为跨域问题没有解决，然后就不知道了。。目前还没得解决办法，找到解决办法了再来更新，如果有遇到这个问题解决了的大佬也麻烦解惑一下呐

音频插件使用（wavesurfer.js）相关推荐

html5音频插件js,wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件
通过wavesurfer.js你可以使用它来制作各种HTML5音频播放器,它可以在各种支持 Web Audio 的浏览器中工作,包括 Firefox, Chrome, Safari, Mobile S ...
Wavesurfer.js 生成音频波形图
Wavesurfer.js 生成音浪波形图 (vue) 代码如下,可直接复制 <template><div class="mixin-components-containe ...
html5音频文件生成波形图代码,使用wavesurfer.js显示mp3 audio音频的波形图
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8290 本文可全文转载,个人网站无需授权,只要保留原作者.出处以及文中链接即可, ...
vue+elementUI使用Wavesurfer.js音频可视化
vue+elementUI使用Wavesurfer.js音频可视化效果图安装 wavesurfer.js npm install wavesurfer.js --save (datav安装) np ...
浅析vue中wavesurfer.js的Minimap插件的使用
前言:vue中嵌入使用wavesurfer.js的教程详见:https://blog.csdn.net/zrcj0706/article/details/104635357 1.Minimap插件的使 ...
vue 绘制波形图 wavesurfer.js （音频/视频）【实用教程】
安装 wavesurfer.js cnpm i wavesurfer.js --save 无 cnpm 的先运行 npm i cnpm -g 全局安装 cnpm 绘制音频波形图常用的配置参数详见注释 ...
声纹图-声谱图-js之wavesurfer.js（配置、事件、方法中文版翻译）
配置信息 option type default English description translate audioRate float 1 Speed at which to play audi ...
JavaScript 音频插件和图表插件
howler音频插件配置项及事件 <!DOCTYPE html> <html lang="en"> <head><meta charse ...
开发chrome 插件， background.js中 console log 看不到解决方法
开发chrome 插件, background.js中 console log 看不到解决方法参考文章: (1)开发chrome 插件, background.js中 console log 看不到 ...
captcha.js一个生成验证码的插件，使用js和canvas生成
一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...

音频插件使用（wavesurfer.js）

音频插件使用（wavesurfer.js）相关推荐

最新文章

热门文章