WFPlayer

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({
    //显示音频波形的dom
    container: '#waveform',
    //是否使用滚动模式
    scrollable: false,
    //媒体元素，如：视频标签或音频标签
    mediaElement: null,
    //是否使用web worker
    useWorker: 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();