Vue + Wavesurfer microphone 实现在线录音及数据获取

最新推荐文章于 2024-08-07 10:30:00 发布

wzc96411

最新推荐文章于 2024-08-07 10:30:00 发布

阅读量823

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/wzc96411/article/details/125654380

版权

本文介绍如何在Vue项目中结合Wavesurfer库，利用mediarecorder对象进行在线录音，并在录音结束时获取ogg或webm格式的音频数据。

摘要由CSDN通过智能技术生成

mounted() {
   
			this.playWave = Wavesurfer.create({
   
				container: document.querySelector('#playWave'),
				backend: 'MediaElement',

			})
			this.singWave = Wavesurfer.create(

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wzc96411

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue获取麦克风_前端多媒体-1.获取摄像头&麦克风

weixin_39616961的博客

12-22

1343

获取视频/音频引言因为最近在学习WebRTC,前端就需要学习一下媒体的相关知识.MediaDevices.getUserMedia()MediaDevice.getUserMedia()与WebRTC相关,欣慰他是通过这组API的门户.提供访问用户本地相机/麦克风媒体流手段MediaDevice.getUserMedia()方法提示用户是否允许使用一个视频或音频输入设备,例如相机或屏幕共享或麦克风...

vue 移动端怎样调取麦克风_Unity调取移动端的麦克风进行录音并播放

weixin_39556702的博客

01-13

738

本文实例为大家分享了Unity调取移动端的麦克风进行录音并播放的具体代码，供大家参考，具体内容如下1.对MicroPhone类的理解对麦克风的调用在Unity里主要是用到了MicroPhone这个类，此类里面有几个方法可以方便我们实现功能2.代码演示#region 模块信息// ************************************************************...

参与评论您还未登录，请先登录后发表或查看评论

wavesurfer fluent-ffmpeg提取音频

cijikanxie88738的博客

11-06

679

我试图得到一个视频音频文件wavesurfer所以可以显示波。我用fluent-ffmpeg表达应用。我已经得到了处理 app.get('/audio/:file', (req, res) =>...

Vue - v-wave 波浪动画组件

最新发布

miaomiaowins的博客

08-07

1160

这个动画库可以在标签中添加新的v-wave属性，来让点击标签元素后添加漂亮的波纹效果，并且可以根据父元素自动形成波纹的颜色，也可以自定义波纹颜色，持续时间，透明度，触发的对象等。

vue中音频wavesurfer.js的使用方法

10-15

主要为大家详细介绍了vue中音频wavesurfer.js的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

wavesurfer音波插件之播放指定语音片段

AlexVirgo

06-19

1394

使用wavesurfer音波插件时，可能会用到这么一个功能，点击音转文后的某一句文字，则需要在音波条上进行播放这一段录音，恰好wavesurfer插件自带这么一个功能，直接上代码 <script type="text/javascript" src="/js/wavesurfer.min.js"></script> <div id="waveform"></div> <script> //初始化 var w...

基于vue+wavesurfer的音频可视化组件，支持播放、暂停、缩放、调节音量、调节播放速度等功能。.zip

02-17

对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。【沟通交流】：有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。鼓励下载和使用，并欢迎大家互相学习，共同...

vue获取麦克风_vue实现录音功能js-audio-recorder

weixin_39826342的博客

01-13

1129

前言：因为业务需要，现在将整理的录音功能资料记录下，使用插件js-audio-recorder实现效果：可得到三种录音数据，pcm,wav,mp3等官方api入口：点我(网不好的童鞋可以看最下面的api截图)官方案例入口：点我官方源码git入口：点我实现步骤：cnpm ijs-audio-recorder--s二：安装将格式转换为mp3的插件 lamejscnpm install lame...

Electron+vue+node+wavesurfer 本地音乐播放器

12-07

Electron+vue+node+wavesurfer打造的本地音乐播放器，可以不用添加目录，播放本地文件系统内的任意音频文件，还能展示音频的波形，有项目说明文档，适合新手学习electron,vue,node

vue前端获取/切换麦克风，播放采集音频和采集音量大小

Oamnij的博客

06-28

5192

vue前端获取/切换麦克风，且可以播放采集到的音频以及获取采集的音量大小

vue使用recorder.js实现录音功能

10-15

主要为大家详细介绍了vue使用recorder.js实现录音功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

wavesurfer音频文件生成音频波浪

qq_41409623的博客

03-31

705

下面展示一些内联代码片。 // A code block var foo = 'bar'; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <script src="https:...

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

zhang_zan

10-27

2438

vue项目中定制化音频

html使用wavesurfer.js把audio文件改成可视化音波音频

weixin_59828740的博客

04-07

436

具体使用方法，在需要使用转成可视化的地方直接引用即可，:audioUrl对应的路径，做线上的话就要发送http请求才能拿到录音文件！下载完之后，考虑到直接使用在现有的页面上，会显得代码很多，而且无法复用，这里直接做成一个工具类，给大家参考使用。使用wavesurfer.js做成可视化音波音频。首先要先下载好wavesurfer.js依赖。

JS实时获取录音数据并播放

qq_40063198的博客

09-11

2115

JS实时获取录音数据并播放

vue3实现录音并播放

weixin_60924822的博客

12-13

715

【代码】vue3实现录音并播放。

vue中使用wavesurfer.js实现语音播放波形显示

AiTingYan的博客

06-24

2163

效果图如下： 1、第一步：使用以下命令安装wavesurfer.js插件库 npm install wavesurfer.js --save 2、第二步：在compenets文件夹创建voice.vue <template> <div :class="{'voice_wrap':true,'large':duration>40,'middle':duration>20&&duration<41,'small':duration<21}"&gt

VUE3使用wavesurfer.js

weixin_51011419的博客

08-11

929

wavsurfer.js绘制波形图（踩雷版）