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();