效果图:
wavesurfer是一个可定制的音频波形可视化,建立在Audio API和HTML5 Canvas之上。 基本使用:
<body>
<script src="https://unpkg.com/wavesurfer.js"></script>
<div id="waveform"></div>
<script>
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple'
});
// 接收传入的音频
wavesurfer.load('./test.mp3');
// 事件
wavesurfer.on('ready', function () {
wavesurfer.play();
});
</script>
</body>
wavesurfer常用参数:
- container:必填,可以是唯一的css3选择器,也可以是DOM元素
- scrollParent:true/false,要使波形滚动。
- audioRate:播放音频的速度。数字越小越慢。
- backgroundColor:更改波形容器的背景颜色。
- barGap:波浪条之间的可选间距(如果未提供)将以旧格式计算。
- barHeight:波形条的高度。大于 1 的数字将增加波形条的高度。
- barMinHeight:绘制波形条的最小高度。默认行为是在静音期间不绘制条形图。
- barRadius:使条形变圆的半径。
- barWidth:波的每一条线宽度
- cursorColor:指示播放头位置的光标填充颜色。
- cursorWidth:指示的宽度
- forceDecode:缩放时使用网络音频强制解码音频以获得更详细的波形。
- height:波形的高度。以像素为单位。
- hideScrollbar:是否在正常显示时隐藏水平滚动条。
- hideCursor:将鼠标悬停在波形上时隐藏鼠标光标。默认情况下会显示。
- interact:是否在初始化时启用鼠标交互。您可以在以后随时切换此参数。
- loopSelection:(与区域插件一起使用)启用所选区域的循环。
- maxCanvasWidth:单个画布的最大宽度(以像素为单位),不包括小的重叠(2 * pixelRatio,四舍五入到下一个偶数整数)。如果波形比此值长,则将使用额外的画布来渲染波形,这对于浏览器无法在单个画布上绘制的非常大的波形非常有用。该参数仅适用于MultiCanvas渲染器。
- mediaControls:这将启用媒体元素的本机控件。
- mediaType:audio’或’video’。
- minPxPerSec:每秒音频的最小像素数。
- partialRender:使用 PeakCache 提高大波形的渲染速度。
- progressColor:光标后面波形部分的填充颜色。当progressColor和waveColor相同时,根本不会渲染进度波
- waveColor:光标后波形的填充颜色
- responsive:如果设置为true调整波形大小,则在调整窗口大小时。默认情况下,这是使用 100 毫秒超时去抖动的。如果此参数是一个数字,则表示该超时。
wavesurfer常用方法:
创建播放实例后调用
- cancelAjax() – 取消音频文件加载过程。
- destroy() – 删除事件、元素并断开 Web 音频节点。
- empty() – 清除波形,就像加载了零长度音频一样。
- getActivePlugins() – 返回当前初始化的插件名称映射。
- getBackgroundColor() – 返回波形容器的背景颜色。
- getCurrentTime() – 以秒为单位返回当前进度。
- getCursorColor() – 返回指示播放头位置的光标的填充颜色。
- getDuration() – 以秒为单位返回音频剪辑的持续时间。
- getPlaybackRate() – 返回音频剪辑的播放速度。
- getProgressColor() – 返回光标后面波形的填充颜色。
- getVolume() – 返回当前音频剪辑的音量。
- getMute() – 返回当前静音状态。
- getFilters() – 返回当前设置过滤器的数组。
- getWaveColor() – 返回光标后波形的填充颜色。
- exportPCM(length, accuracy, noWindow, start)– 将 PCM 数据导出为 JSON 数组。可选参数length [number] - default: 1024, accuracy [number] - default: 10000, noWindow [true|false] - default: false,start [number] - default: 0
- exportImage(format, quality, type) – 将波形图像作为数据 URI 或 Blob 返回。
- isPlaying()–true如果当前正在播放则返回,否则返回false。
- load(url, peaks, preload)–URL通过 XHR加载音频。的可选数组peaks。可选preload参数[none|metadata|auto],如果使用后端 MediaElement ,则传递给Audio 元素。
- loadBlob(url)– 从Blob或File对象加载音频。
- on(eventName, callback)– 订阅事件。有关所有事件的列表,请参阅WaveSurfer事件。
- un(eventName, callback) – 取消订阅事件。
- unAll() – 取消订阅所有事件。
- pause() – 停止播放。
- play([start[, end]])– 从当前位置开始播放。可选start且end以秒为单位测量可用于设置要播放的音频范围。
- playPause() – 暂停时播放,播放时暂停。
- seekAndCenter(progress)– 寻求进度和中心视图[0…1](0 = 开始,1 = 结束)。
- seekTo(progress)– 寻求进步[0…1](0 = 开始,1 = 结束)。
- setBackgroundColor(color) – 设置波形容器的背景颜色。
- setCursorColor(color) – 设置指示播放头位置的光标的填充颜色。
- setHeight(height) – 设置波形的高度。
- setFilter(filters)- 用于将您自己的 WebAudio 节点插入图中。请参阅下面的连接过滤器。
- setPlaybackRate(rate)– 设置播放速度(0.5半速、1正常速度、2双速等)。
- setPlayEnd(position) – 设置播放停止点(以秒为单位)。
- setVolume(newVolume)– 将播放音量设置为新值[0…1](0 = 静音,1 = 最大)。
- setMute(mute)– 静音当前声音。可以是true静音或false取消静音的布尔值
- setProgressColor(color) – 设置光标后面波形的填充颜色。
- setWaveColor(color) – 设置光标后波形的填充颜色。
- skip(offset) – 从当前位置跳过几秒钟(使用负值向后移动)。
- skipBackward()- 倒带skipLength秒。
- skipForward()- 跳过skipLength几秒钟。
- setSinkId(deviceId) - 设置接收器 ID 以更改音频输出设备。
- stop() – 停止并转到开头。
- toggleMute() – 打开和关闭音量。
- toggleInteraction() – 切换鼠标交互。
- toggleScroll()– 切换scrollParent。
- zoom(pxPerSec)– 水平放大和缩小波形。该参数是每秒音频的水平像素数。它还会更改参数minPxPerSec并启用该 scrollParent选项。
wavesurfer常用事件:
使用on()和un() 方法订阅和取消订阅各种播放器事件文章来源:https://www.toymoban.com/news/detail-714269.html
- audioprocess– 在音频播放时持续触发。也在寻找上火。
- dblclick – 双击实例时。
- destroy – 当实例被销毁时。
- error– 发生错误。回调将收到(字符串)错误信息。
- finish – 当它完成播放时。
- interaction – 与波形交互时。
- loading– 使用 fetch 或 drag’n’drop 加载时连续触发。回调将以百分比 [0…100] 接收(整数)加载进度。
- mute– 静音更改。回调将收到(布尔值)新的静音状态。
- pause – 音频暂停时。
- play – 播放开始时。
- ready– 加载音频、解码并绘制波形时。使用 MediaElement 时,这会在绘制波形之前触发,请参阅waveform-ready。
- scroll- 当滚动条移动时。回调将接收一个ScrollEvent对象。
- seek– 在寻求。回调将收到(浮动)进度[0…1]。
- volume– 关于音量变化。回调将接收(整数)新卷。
- waveform-ready– 在使用 MediaElement 后端绘制波形后触发。如果您使用的是 WebAudio 后端,则可以使用ready.
- zoom– 关于缩放。回调将接收(整数)minPxPerSec。
参考:wavesurfer.js | audio waveform player JavaScript library文章来源地址https://www.toymoban.com/news/detail-714269.html
到了这里,关于vue项目中定制化音频展示,wavesurfer.js基本使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!