實現效果：

主要實現代碼邏輯部分，具體頁面結構就不一一介紹了。

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_imgrc.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 實現音頻錄制播放內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！