Vue+node实现音频录制播放功能

 更新时间:2021年03月24日 14:24:42   作者:Jeslie-He  
这篇文章主要介绍了Vue+node实现音频录制播放,功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

实现效果:

在这里插入图片描述

主要实现代码逻辑部分,具体页面结构就不一一介绍了。

vue部分:
安装recorderx

cnpm install recorderx --save 

或者

npm install recorderx --save

在具体的组件中引入

<script>
	import axios from "axios";
	import {
		Toast
	} from "vant";
	import Recorderx, {
		ENCODE_TYPE
	} from "recorderx";
	const rc = new Recorderx();
	
	export default {
	   data(){
	     return{
	       startime:null,
	       endtime :null
	     }
	   },
	    methods:{
	    	//录制语音
			recordingVoice() {
				// that.news_img = !that.news_img
				rc.start()
					.then(() => {
						this.startime = new Date();
					})
					.catch(error => {
						alert("获取麦克风失败");
					});
			  },
			  //发送语音
			async sendVoice() {
				
				rc.pause();
				this.endtime = new Date();
				let wav = rc.getRecord({
					encodeTo: ENCODE_TYPE.WAV,
					compressible: true
				});
				let voiceTime = Math.ceil((this.endtime - this.startime) / 1000);
				const formData = new FormData();

				formData.append("chatVoice", wav, Date.parse(new Date()) + ".wav");
				formData.append("voiceTime", voiceTime);
				let headers = {
					headers: {
						"Content-Type": "multipart/form-data"
					}
				};
					axios
						.post("/api/uploadChatVoice", formData, headers)
						.then(res => {
							//console.log(res)
							if (res.data.status === 2) {
					
								rc.clear();
								let chatVoiceMsg = res.data.chatVoiceMsg;
							}
							}
						});
				
			},
			//播放语音
				playChatVoice(audio) {
				let audioUrl = audio;
				if(audioUrl){
					
					let audioExample = new Audio();
					audioExample.src = audioUrl; //想要播放的音频地址
					audioExample.play();
				}else{
					Toast('语音地址已被摧毁');
				}
				
			},
	    }
	};
</script>

node部分:
这里我使用的是express框架搭建的后台
具体的获取前台的请求代码如下
安装multiparty

cnpm install multiparty --save
const express = require('express');
const router = express.Router();
const multiparty = require('multiparty');
const NET_URL = 'http://127.0.0.1:3000/';
router.post('/uploadChatVoice', (req, res, next) => {

  let form = new multiparty.Form();

  form.uploadDir = 'chatVoiceUpload';
  form.parse(req, (err, fields, files) => {
    console.log(files, fields)
    let chatVoiceUrl = NET_URL + files.chatVoice[0].path.replace(/\\/g, "/");
    let chatVoiceTime = fields.voiceTime[0]
    console.log(chatVoiceUrl)
    if (chatVoiceUrl) {
      res.json({
        status: 2,
        chatVoiceMsg: {
          chatVoiceTime,
          chatVoiceUrl,
        }
      })
    } else {
      res.json({
        status: 1,
        chatVoiceMsg: {
          chatVoiceTime: "",
          chatVoiceUrl: ""
        }
      })
    }
    //console.log(files)

  })
})

在app.js中,定义语音文件路径

app.use('/chatVoiceUpload', express.static('chatVoiceUpload'));

 

在这里插入图片描述

到此这篇关于Vue+node实现音频录制播放功能的文章就介绍到这了,更多相关Vue 实现音频录制播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue中遍历数组的新方法实例详解

    Vue中遍历数组的新方法实例详解

    这篇文章主要介绍了Vue中遍历数组的新方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • vue自定义树状结构图的实现方法

    vue自定义树状结构图的实现方法

    这篇文章主要给大家介绍了关于vue自定义树状结构图的实现方法,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • 在Vue中延迟执行某个函数的实现方式

    在Vue中延迟执行某个函数的实现方式

    在Vue中延迟执行某个函数,你可以使用setTimeout()函数或者Vue提供的生命周期钩子函数,本文通过一些示例代码给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-12-12
  • Vue实现点击当前行变色

    Vue实现点击当前行变色

    这篇文章主要为大家详细介绍了Vue实现点击当前行变色,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • Vue3中使用vant的踩坑实战日记

    Vue3中使用vant的踩坑实战日记

    Vant是有赞前端团队开源的移动端组件库,于2017年开源,已持续维护4年时间,下面这篇文章主要给大家介绍了关于Vue3中使用vant的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • vue3.0 vue-router4.0打包后页面空白的解决方法

    vue3.0 vue-router4.0打包后页面空白的解决方法

    本文主要介绍了vue3.0 vue-router4.0打包后页面空白的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • Vue核心概念Action的总结

    Vue核心概念Action的总结

    今天小编就为大家分享一篇关于Vue核心概念Action的总结,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 使用Vue.js和Flask来构建一个单页的App的示例

    使用Vue.js和Flask来构建一个单页的App的示例

    本篇文章主要介绍了使用Vue.js和Flask来构建一个单页的App的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • vue 解决IOS10低版本白屏的问题

    vue 解决IOS10低版本白屏的问题

    这篇文章主要介绍了vue 解决IOS10低版本白屏的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue中使用jsencrypt进行RSA非对称加密的操作方法

    Vue中使用jsencrypt进行RSA非对称加密的操作方法

    这篇文章主要介绍了Vue中使用jsencrypt进行RSA非对称加密,在这里需要注意要加密的数据必须是字符串,对Vue RSA非对称加密相关知识感兴趣的朋友一起看看吧
    2022-04-04

最新评论