小程序录音 mp3

最新推荐文章于 2025-08-04 09:50:05 发布

原创最新推荐文章于 2025-08-04 09:50:05 发布 · 396 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#小程序

html前台小结专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用WeChat小程序的WXML和JS实现录音、暂停、播放和发送功能。开发者通过`wx.getRecorderManager`获取录音管理器，展示了如何触发录音、停止录音，并利用`createInnerAudioContext`播放录音。

demo.wxml

<view>
  <button bindtap='startRecordMp3' type='primary'>录音开始（mp3）</button>
</view>
<view>
  <button bindtap='stopRecord' type='primary'>录音结束</button>
</view>
<view>
  <button bindtap='playRecord' type='primary'>播放录音</button>
</view>
<view>
  <button bindtap='sendRecord' type='primary'>播放录音</button>
</view>

demo.wxss

view{
  padding: 15px;
}

demo.js

// pages/newMusic/index.js
const recorderManager = wx.getRecorderManager();
Page({

    data: {
        
    },

    /**
    * 提示
    */
    tip: function (msg) {
        wx.showModal({
            title: '提示',
            content: msg,
            showCancel: false
        })
    }

    /**
     * 录制mp3音频
    */
    , startRecordMp3: function () {
        recorderManager.start({
            format: 'mp3'
        });
    }

    /**
     * 停止录音
     */
    , stopRecord: function () {
        recorderManager.stop()
    }

    /**
     * 播放录音
     */
    , playRecord: function () {
        var that = this;
        var src = this.data.src;
        if (src == '') {
            this.tip("请先录音！")
            return;
        }
        this.innerAudioContext.src = this.data.src;
        this.innerAudioContext.play()
    },

    onLoad: function (options) {
        var that = this;
        recorderManager.onError(function () {
            that.tip("录音失败！")
        });
        recorderManager.onStop(function (res) {
            that.setData({
                src: res.tempFilePath
            })
            console.log(res.tempFilePath)
            that.tip("录音完成！")
        });

        this.innerAudioContext = wx.createInnerAudioContext();
        this.innerAudioContext.onError((res) => {
            that.tip("播放录音失败！")
        })

    }

})