實(shí)現(xiàn)效果：

主要實(shí)現(xiàn)代碼邏輯部分，具體頁面結(jié)構(gòu)就不一一介紹了。

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('獲取麥克風(fēng)失敗');}); }, //發(fā)送語音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框架搭建的后臺(tái)具體的獲取前臺(tái)的請(qǐng)求代碼如下安裝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’));

到此這篇關(guān)于Vue+node實(shí)現(xiàn)音頻錄制播放功能的文章就介紹到這了,更多相關(guān)Vue 實(shí)現(xiàn)音頻錄制播放內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！