文山网站建设哪家好,网站的建立目的,温州有限公司,区总工会网站建设流程WFPlayer WFPlayer 可以实现分析音视频生成音频波形图
在线demo地址: demo WFPlayer支持#xff1a;
在不加载整个媒体文件的情况下创建波形自定义光标、进度、网格、标尺显示和颜色加载媒体url和加载媒体dom元素#xff08;视频标签和音频标签#xff09;颜色或宽度等实时…WFPlayer WFPlayer 可以实现分析音视频生成音频波形图
在线demo地址: demo WFPlayer支持
在不加载整个媒体文件的情况下创建波形自定义光标、进度、网格、标尺显示和颜色加载媒体url和加载媒体dom元素视频标签和音频标签颜色或宽度等实时更改选项收听播放动画的媒体元素的播放状态自适应父元素大小和音频数据 下载
npm install wfplayer或
yarn add wfplayer引入
import WFPlayer from wfplayer初始化
div idwaveform stylewidth: 1000px; height: 300px/div
video idvideo srcpath/to/video.mp4/video!-- 如果只有音频文件 --
audio idaudio srcpath/to/audio.mp3/audiovar 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();
