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
The meaning of key_len In MySQL, you can use expl...
Some fault code tables use the following design p...
<div id="root"> <h2>Keep go...
This article describes the Mysql self-join query....
1. Pull the redis image docker pull redis 2. Star...
Today, when verifying the concurrency problem of ...
question Recently I encountered a requirement to ...
Table of contents 1. Template 2. Generics 3. Gene...
Table of contents 1. Scenario Description 2. Solu...
Preface I am currently working on a high-quality ...
1. Optimization of commonly used HTML tags HTML s...
A few days ago, a colleague received a points mal...
Preface Previously, static IPs assigned using pip...
1. SSH remote management SSH Definition SSH (Secu...
[LeetCode] 196.Delete Duplicate Emails Write a SQ...