vue项目中定制化音频展示,wavesurfer.js基本使用

这篇具有很好参考价值的文章主要介绍了vue项目中定制化音频展示,wavesurfer.js基本使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果图:

vue项目中定制化音频展示,wavesurfer.js基本使用,vue,前端知识,javascript,vue.js,音视频

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() 方法订阅和取消订阅各种播放器事件

  • 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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3+ts+element-plus 之使用node.js对接mysql进行表格数据展示

    * 初始化node 查看node是否安装 node -v 初始化命令 npm init 初始化配置解释如下: 完成后会有一个package.json文件 * 安装可能用到的依赖 根据需求安装,我这里需要对接mysql,安装依赖 ,我是一次性安装完,后边会直接使用,也可以边安装边使用。如下 安装成功如下: * 配置文件

    2024年02月15日
    浏览(49)
  • vue3+tiff.js展示tif文件

    vue3+tiff.js展示tif文件 场景:tif格式的文件需要在页面上预览(预览的tif文件较小) 组件:tiff.js 组件引入: 注意:网络上的信息引入使用 import Tiff from \\\'tiff.js\\\'   但是实际测试这样会报错:   看源码发现只需要直接import即可获取到Tiff对象 代码: 注意: 1.由于tiff文件格式浏

    2024年02月12日
    浏览(50)
  • vue3项目中使用three.js

    在vue3项目中,通过three.js使用了一段短小但完整的代码实现了实际的三维效果图。 Three.js是一个轻量级,跨平台的Javascript库,可以在浏览器上结合HTML5的canvas,SVG或者WebGL,创建和展示3D模型和动画。 Three.js允许我们在不依赖任何浏览器插件的情况下,创建一个GPU加速的3D动画场

    2024年01月23日
    浏览(48)
  • vue项目中使用EasyPlayer.js播放视频

    项目中最近需要接摄像头的监控画面,一开始用了市面上一些别的插件,发现有些视频能播放,有些不能播放,最后发现是摄像头码流的问题,很多插件都无法支持h265的编码格式。但是现在市面上稍微新点的摄像头,都是h265的编码格式。 一、插件下载 npm install copy-webpack-

    2024年02月12日
    浏览(39)
  • vue中vuex的五个属性和基本用法,另加js-cookie的使用

    VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。 state, getters, mutations, actions, modules。 1. state: vuex的基本数据,用来存储变量 2. geeter: 从基本数据(state)派生的数据,相当于state的计算属性 3.

    2024年02月14日
    浏览(41)
  • vue2项目之swiper.js 的使用

    swiper.js 的使用 官网 API(部署在 swiper 实例中):https://www.swiper.com.cn/api/index.html 官网轮播图(查看源代码):https://www.swiper.com.cn/demo/index.html 接下来介绍怎么在 vue2 里使用 swiper.js (vue2 使用 swiper5版本) 1、安装、引入css 2、在组件中使用:引入 js 引入 html 结构 html 结构:

    2024年02月05日
    浏览(49)
  • Vue中如何进行3D场景展示与交互(如Three.js)

    随着WebGL技术的发展,越来越多的网站开始使用3D场景来展示产品、游戏等内容。在Vue中,我们可以使用第三方库Three.js来实现3D场景的展示与交互。本文将介绍如何在Vue中使用Three.js来创建3D场景,并实现交互功能。 Three.js是一个用于创建3D图形的JavaScript库。它基于WebGL技术,

    2024年02月09日
    浏览(74)
  • 自适应插件autofit.js使用(这里演示vue项目)

    这个插件使用以后,页面会根据浏览器的缩放自适应的改变宽高 这里演示的是vue3项目,其他项目也可类似去写 如果要在整个项目做自适应,将配置配到App.vue,如果只要单个页面自适应,只需要配置当前页面即可 App.vue配置如下(单个页面自适应也是如此配置) 以下代码三步走

    2024年02月04日
    浏览(40)
  • vue将某个组件打包成js,在其他项目使用

    1、首先创建一个组件的文件,里面包括了组件页面和index.js,index.js的作用是把组件暴露出去,目录结构: 2、index.js里面的内容 3、配置package.json打包命令,可以通过 --mode 后面参数指定打包环境 注意:目前vue.config.js里面是没有任何配置的,到这里其实就可以了,运行打包命

    2024年02月16日
    浏览(62)
  • vue 项目使用three.js 实现3D看房效果

    0.前言 该教程能帮助直接写出vue项目的3D看房效果!!! 先上效果图 1.安装依赖 2.vue代码 这里文件名为three.vue 代码非原创,出处 vue3+threejs实现全景看房 (异步加载 BOLLROOM 部件为对原代码的修改) 注意这里的hdr 文件必须要放在assets文件夹中,且要通过import模块的形式导入!

    2024年02月13日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包