Result: The main part is to implement the code logic, and the specific page structure will not be introduced one by one. Vue part: cnpm install recorderx --save or npm install recorderx --save Introduced in a specific component <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:{ //Recording voice recordingVoice() { // that.news_img = !that.news_img rc.start() .then(() => { this.startime = new Date(); }) .catch(error => { alert("Failed to get microphone"); }); }, //Send voice 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.starttime) / 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; } } }); }, //Play the audio playChatVoice(audio) { let audioUrl = audio; if(audioUrl){ let audioExample = new Audio(); audioExample.src = audioUrl; //The audio address you want to play audioExample.play(); }else{ Toast('Voice address has been destroyed'); } }, } }; </script> Node part: 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) }) }) In app.js, define the voice file path app.use('/chatVoiceUpload', express.static('chatVoiceUpload')); This is the end of this article about Vue+node realizing audio recording and playback functions. For more relevant Vue audio recording and playback content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: MySQL 5.7.18 free installation version window configuration method
>>: Sample code for deploying Spring-boot project with Docker
Error: Connection to blog0@localhost failed. [080...
Recently, I found that the company's server t...
In this tutorial, we use the latest MySQL communi...
Table of contents 1. Easy to use 2. Using generic...
Feelings: I am a backend developer. Sometimes when...
The error "mysql is not an internal command&...
Note 1: Solve the problem of slow connection to M...
Table of contents 1. Shared CommonModule 2. Share...
First, let’s take a look at a CSS carousel animat...
Use v-model to bind the paging information object...
This is an article about website usability. The a...
First, you can open Moments and observe several l...
Table of contents 1. Introduction to SELinux 2. B...
When using SQL to extract data, we often encounte...
Table of contents 1. context 1. Usage scenarios 2...