vue 使用weixin-sdk 录音功能

最新推荐文章于 2025-07-09 16:29:18 发布

原创

最新推荐文章于 2025-07-09 16:29:18 发布 · 5.5k 阅读

8 ·

CC 4.0 BY-SA版权

本文介绍了一位新手开发者在Vue项目中如何使用Weixin-SDK实现录音功能。作者强调Weixin-SDK只能在线上环境并在微信内使用，并提供了官方文档链接和简单的实现步骤，包括SDK安装、导入、录音、停止、上传等操作，以及如何将录音文件保存到后端并转换为MP3。最后，作者鼓励读者留言讨论可能遇到的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚毕业，进入公司，遇到的第一个vue项目，使用weixin-sdk-js 做录音功能，于是开始了研究之旅，经过的许久的研究，终于是禅悟出了一点皮毛
多次试验，失败，总结：weixin-js-sdk 是要在线上使用的，而且只能在微信上使用多说不易，上干货

献上官方使用说明文档地址

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

干货现在开始

第一步肯定是先安装这个sdk了

npm install weixin-js-sdk

在使用的文件里面引入

import wx from 'weixin-js-sdk'

我随便写了一个小dome 代码献上
功能为录音停止上传…
为了将录音永久保存，将录音也传到后端，后端转成MP3文件返回地址
又加了一个将所有录音合成一段长音频返回

<template>
  <div class="hello">
    <button  class="record" @click="start">开始录音</button>
    <button @click="stop">停止录音</button>
    <button @click="cancel">取消录音</button>
    <!-- <button @click="play">播放录音</button>
    <button @click="pausePlay">暂停播放</button>
    <button @click="stopPlay">停止播放</button> -->
    <!-- <button @click="upVoice">上传语音</button>
    <button @click="downVoice">下载录音</button> -->
    <!-- <button @click="fake">假的</button> -->
    <!-- <button @click="setTime">开始计时</button>
    <button @click="creamTime">停止计时</button> -->
    <br>
    <p>录音时间{
   
   {
   
   time}}</p>

    <div class="list">
        刚录完的语言
        <audio ref=