WFPlayer
WFPlayer 可以实现分析音视频生成音频波形图
在线demo地址: demo
WFPlayer
支持:
- 在不加载整个媒体文件的情况下创建波形
- 自定义光标、进度、网格、标尺显示和颜色
- 加载媒体url和加载媒体dom元素(视频标签和音频标签)
- 颜色或宽度等实时更改选项
- 收听播放动画的媒体元素的播放状态
- 自适应父元素大小和音频数据
下载
npm install wfplayer
或
yarn add wfplayer
引入
import WFPlayer from 'wfplayer'
初始化
<div id="waveform" style="width: 1000px; height: 300px"></div>
<video id="video" src="path/to/video.mp4"></video><!-- 如果只有音频文件 -->
<audio id="audio" src="path/to/audio.mp3"></audio>
var wf = new WFPlayer({container: document.querySelector('#waveform'),mediaElement: document.querySelector('#video'),
});wf.load(document.querySelector('#video'));// 只有音频文件
wf.load('path/to/audio.mp3');
配置项
在new WFPlayer
传入的对象中可以设置其他属性改变显示的样式
var wf = new WFPlayer({//显示音频波形的domcontainer: '#waveform',//是否使用滚动模式scrollable: false,//媒体元素,如:视频标签或音频标签mediaElement: null,//是否使用web workeruseWorker: true,//Thw刷新延迟时间refreshDelay: 50,//是否显示波形wave: true,//波形颜色waveColor: 'rgba(255, 255, 255, 0.1)',// 背景颜色backgroundColor: 'rgb(28, 32, 34)',// 是否显示光标cursor: true,//光标颜色cursorColor: '#ff0000',//是否显示进度progress: true,//进度颜色progressColor: 'rgba(255, 255, 255, 0.5)',//是否显示网格grid: true,//网格颜色gridColor: 'rgba(255, 255, 255, 0.05)',//是否显示标尺ruler: true,//标尺颜色rulerColor: 'rgba(255, 255, 255, 0.5)',//是否显示滚动条scrollbar: true,//滚动条颜色scrollbarColor: 'rgba(255, 255, 255, 0.25)',//是否在顶部显示标尺rulerAtTop: true,//像素比率pixelRatio: window.devicePixelRatio,//要渲染的音频通道channel: 0,//渲染持续时间duration: 10,//两侧空间的比例padding: 5,//波形高度比例waveScale: 0.8,//波形大小比waveSize: 1,
});
api
加载目标
// 目标可以是媒体的url地址,也可以是mediaElement、ArrayBuffer或Audiobuffer
wf.load(target);
切换轨道
wf.changeChannel(1);
跳转到某一时间
wf.seek(second);
平缓地跳转到某一时间
wf.smoothSeek(second);
导出图片
wf.exportImage();
修改配置项
wf.setOptions({// 修改波形颜色waveColor: 'red',
});
销毁实例
wf.destroy();