Vue 使用 js-audio-recorder 实现录制、播放、下载音频

本文主要是介绍Vue 使用 js-audio-recorder 实现录制、播放、下载音频,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Vue 使用 js-audio-recorder 实现录制、播放、下载 PCM 数据

  • Vue 使用 js-audio-recorder 实现录制、播放、下载 PCM 数据
    • js-audio-recorder 简介
    • Vue 项目创建
    • 下载相关依赖
    • 主界面设计
    • 设置路由
    • 组件及页面设计
    • 项目启动
    • 源码下载

Vue 使用 js-audio-recorder 实现录制、播放、下载 PCM 数据

js-audio-recorder 简介

纯 js 实现浏览器端录音。

支持功能:

  • 支持录音,暂停,恢复,和录音播放。
  • 支持音频数据的压缩,支持单双通道录音。
  • 支持录音时长、录音大小的显示。
  • 支持边录边转(播放) 后续支持。
  • 支持导出录音文件,格式为 pcm 或 wav。
  • 支持录音波形显示,可自己定制。

项目地址:https://github.com/2fps/recorder

演示地址:https://recorder.zhuyuntao.cn/

Vue 项目创建

按下面的步骤创建 Vue 项目:

在这里插入图片描述

然后 cd 到 vue_recorder 下,终端输入 npm run serve,出现下面输出说明成功了:

在这里插入图片描述

浏览器打开 http://localhost:8080/:

在这里插入图片描述

下载相关依赖

在项目中我们会用到 js-audio-plugin 以及 Element ,所以需要下载相关依赖并在 main.js 中引入。

安装 js-audio-plugin 指令:npm i js-audio-recorder

安装 Element 指令:npm install element-ui

安装好以后,在 main.js 添加:

// 引入 element-ui
import ElementUI from 'element-ui';
// element-ui 的 css 样式要单独引入
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

主界面设计

主页面的设计在根组件 App.vue 中进行,主要负责一些全局内容的显示。

<template><div id="app"><!-- <nav><router-link to="/">Recorder</router-link> |</nav> --><router-view /></div>
</template><style lang="scss">
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}nav {padding: 30px;a {font-weight: bold;color: #2c3e50;&.router-link-exact-active {color: #42b983;}}
}
</style>

设置路由

在 router 目录下的 index.js 中设置路由:

import Vue from 'vue'
import VueRouter from 'vue-router'
import RecorderView from '../views/RecorderView.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'recorder',component: RecorderView},
]const router = new VueRouter({routes
})export default router

组件及页面设计

在 compoments 文件夹下新建 MyRecorder.vue:

<template><div style="padding: 20px;"><h1>{{ msg }}</h1><h3>录音上传</h3><div style="font-size:14px"><h3>录音时长:{{ recorder && recorder.duration.toFixed(4) }}</h3><br /><el-button type="primary" @click="handleStart">开始录音</el-button><el-button type="info" @click="handlePause">暂停录音</el-button><el-button type="success" @click="handleResume">继续录音</el-button><el-button type="warning" @click="handleStop">停止录音</el-button><br /><br /><h3>播放时长:{{ recorder && (playTime > recorder.duration ? recorder.duration.toFixed(4) : playTime.toFixed(4)) }}</h3><br /><el-button type="primary" @click="handlePlay">播放录音</el-button><el-button type="info" @click="handlePausePlay">暂停播放</el-button><el-button type="success" @click="handleResumePlay">继续播放</el-button><el-button type="warning" @click="handleStopPlay">停止播放</el-button><el-button type="error" @click="handleDestroy">销毁录音</el-button><el-button type="primary" @click="downloadPCM">下载PCM数据</el-button><el-button type="primary" @click="downloadWAV">下载WAV数据</el-button><el-button type="primary" @click="uploadRecord">上传</el-button></div></div>
</template><script>
import Recorder from 'js-audio-recorder'
// import axios from 'axios'export default {name: 'MyRecorder',props: {msg: String},data() {return {recorder: null,playTime: 0,timer: null,src: null}},created() {this.recorder = new Recorder({sampleBits: 16, // 采样位数,支持 8 或 16,默认是 16sampleRate: 16000, // 采样率,支持 11025、16000、22050、24000、44100、48000,根据浏览器默认值,Chrome 是 48000numChannels: 1, // 声道数,支持 1 或 2, 默认是 1})},methods: {// 开始录音handleStart() {this.recorder = new Recorder()Recorder.getPermission().then(() => {console.log('开始录音')this.recorder.start() // 开始录音}, (error) => {this.$message({message: '请先允许该网页使用麦克风',type: 'info'})console.log(`${error.name} : ${error.message}`)})},handlePause() {console.log('暂停录音')this.recorder.pause() // 暂停录音},handleResume() {console.log('恢复录音')this.recorder.resume() // 恢复录音},handleStop() {console.log('停止录音')this.recorder.stop() // 停止录音},handlePlay() {console.log('播放录音')console.log(this.recorder)this.recorder.play() // 播放录音// 播放时长this.timer = setInterval(() => {try {this.playTime = this.recorder.getPlayTime()} catch (error) {this.timer = null}}, 100)},handlePausePlay() {console.log('暂停播放')this.recorder.pausePlay() // 暂停播放// 播放时长this.playTime = this.recorder.getPlayTime()this.time = null},handleResumePlay() {console.log('恢复播放')this.recorder.resumePlay() // 恢复播放// 播放时长this.timer = setInterval(() => {try {this.playTime = this.recorder.getPlayTime()} catch (error) {this.timer = null}}, 100)},handleStopPlay() {console.log('停止播放')this.recorder.stopPlay() // 停止播放// 播放时长this.playTime = this.recorder.getPlayTime()this.timer = null},handleDestroy() {console.log('销毁实例')this.recorder.destroy() // 销毁实例this.timer = null},downloadPCM() {console.log('下载PCM格式数据')// 注:使用该方法会默认调用 stop() 方法this.recorder.downloadPCM('record-pcm')},downloadWAV() {console.log('下载WAV格式数据')// 注:使用该方法会默认调用 stop() 方法this.recorder.downloadWAV('record-wav')},uploadRecord() {if (this.recorder == null || this.recorder.duration === 0) {this.$message({message: '请先录音',type: 'error'})return false}this.recorder.pause() // 暂停录音this.timer = nullconsole.log('上传录音') // 上传录音const formData = new FormData()const blob = this.recorder.getPCMBlob() // 获取 pcm 格式音频数据// 此处获取到 blob 对象后需要设置 fileName 满足项目上传需求,这里选择直接把 blob 作为 file 塞入 formDataconst fileOfBlob = new File([blob], new Date().getTime() + '.pcm')formData.append('file', fileOfBlob)const url = window.URL.createObjectURL(fileOfBlob)this.src = url// const axios = require('axios')// axios.post(url, formData).then(res => {//   console.log(res.data.data[0].url)// })}}
}
</script>

在 views 文件夹下新建 RecorderView.vue:

<template><div class="home"><!-- <imgalt="Vue logo"src="../assets/logo.png"> --><MyRecorder msg="Welcome to Vue Recorder" /></div>
</template><script>
// @ is an alias to /src
import MyRecorder from '@/components/MyRecorder.vue'export default {name: 'RecorderView',components: {MyRecorder}
}
</script>

项目启动

在终端中输入指令:npm run serve

可以看到如下界面,说明项目成功运行:

在这里插入图片描述

根据提示访问本地地址 http://localhost:8080/。

在这里插入图片描述

经过测试,页面正常排布,所有功能都正常使用(除了上传功能)。

源码下载

GitHub:https://github.com/UestcXiye/Vue-Recorder

CSDN:vue-recorder.zip

这篇关于Vue 使用 js-audio-recorder 实现录制、播放、下载音频的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/515627

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因?

视频智能分析/视频监控/安防监控综合管理系统EasyCVR视频汇聚融合平台,是TSINGSEE青犀视频垂直深耕音视频流媒体技术、AI智能技术领域的杰出成果。该平台以其强大的视频处理、汇聚与融合能力,在构建全栈视频监控系统中展现出了独特的优势。视频监控管理系统EasyCVR平台内置了强大的视频解码、转码、压缩等技术,能够处理多种视频流格式,并以多种格式(RTMP、RTSP、HTTP-FLV、WebS

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件