微信小程序实现录制、试听、上传音频（带波形图）

最新推荐文章于 2024-12-19 15:50:05 发布
原创 最新推荐文章于 2024-12-19 15:50:05 发布 · 3.2k 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序

本文介绍了一种使用getBackgroundAudioManager实现音频录制、播放和上传的功能，并通过CSS实现声音波形图的展示，详细展示了XML布局和JS逻辑代码。

最近接到这样一个需求，要求实现录制、试听、上传音频功能，选择的是getBackgroundAudioManager,声音录制和播放波形图是用css实现的，效果图及详细设计代码如下：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • xml文件

    <view class="servicePage">
  <view style="width:100%;height:320rpx;position:absolute;z-index:-1;">
    <image style="width:100%" src="../../img/bg.png" mode='widthFix'></image>
  </view>
  <view class="content" style="height:{
        
        {
        
        contentHeight}}">
    <view class="allService">
      <view class="title">
        录制提示
      </view>
    </view>
    <view class="voiceView">
      <view class="voiceTime" style="text-align: center;">00:00:<span>{
    
    {currentTime}}</span></view>
      <view class="voiceLine">
        <view class="voiceBox" wx:if="{
      
      {!showWaveView}}">
              <view class="Wave1">
                <view class="voiceWave">
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                </view>
                <view class="voiceWave1">
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                </view>
              </view>
              <view class="Wave1">
                  <view class="voiceWave">
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                  </view>
                  <view class="voiceWave1">
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                  </view>
              </view>
              <view class="Wave2">
                <view class="voiceWave">
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                </view>
                <view class="voiceWave1">
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                  <view class="auItem"></view>
                </view>
              </view>
              <view class="Wave1">
                  <view class="voiceWave">
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                  </view>
                  <view class="voiceWave1">
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                  </view>
              </view>
              <view class="Wave1">
                    <view class="voiceWave">
                      <view class="auItem"></view>
                      <view class="auItem"></view>
                      <view class="auItem"></view>
                      <view class="auItem"></view>
                      <view class="auItem"></view>
                      <view class="auItem"></view>
                      <view class="auItem"></view>
                    </view>
                    <view class="voiceWave1">
                      <view class="auItem"></view>
                      <view class="auItem"></view>
                      <view class="auItem"></view>
                      <view class="auItem"></view>
                      <view class="auItem"></view>
                      <view class="auItem"></view>
                      <view class="auItem"></view>
                    </view>
              </view>
              <view class="Wave1">
                  <view class="voiceWave">
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                  </view>
                  <view class="voiceWave1">
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                  </view>
              </view>
              <view class="Wave3">
                  <view class="voiceWave">
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                  </view>
                  <view class="voiceWave1">
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                  </view>
              </view>
              <view class="Wave1">
                  <view class="voiceWave">
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                  </view>
                  <view class="voiceWave1">
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                  </view>
              </view>
              <view class="Wave1">
                  <view class="voiceWave">
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                    <view class="auItem"></view>
                  </view>
                  <view class="voiceWave1">
                    <view class="auItem">
最低0.47元/天 解锁文章
uniapp - [微信小程序] 超详细实时录音功能，录制外部声音及播放上传到服务器（支持录音完毕生成 mp3、试听音频(带进度条)、暂停录音、重新录音、限制录音最大时长、自定义音频名称等功能）
🏆 前端领域优质创作者
06-28 1万+
uniapp微信小程序录音，uniapp微信小程序麦克风录音效果示例代码，uniapp微信小程序录音插件，uniapp如何实现一个录音并生成mp3文件功能，uniapp微信小程序平台怎么录音且保存音频mp3，uniapp点击录音并上传到服务器，uniapp实现录音并播放，uniapp如何实现录音功能，uniapp小程序长按录音点击播放等功能组件，uniapp小程序怎么实现录音并下载保存到本地，uniapp微信小程序平台端录音，uniapp小程序实现录制声音和试听播放上传音频功能，uniapp录制说话唱歌音
微信小程序实现录制、试听、上传音频功能（带波形图）
10-15
主要介绍了微信小程序实现录制、试听、上传音频功能（带波形图）,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
小程序实现录音，输出声音波形图
热门推荐
coder_daiwang的博客
12-28 1万+
使用Ffpgem ，silk-v3-decoder，wavesurfer。 一：用php后台来输出波形图，可查看资源包对应的wavToImg.php（没有第二种准确） 二：使用小程序web-view，通过wavesurfer来实现。因为小程序不支持绘图。 以上两种方法都需要注意： 如果不是真机测试，则不需要silkdecode.php，小程序录音silk文件需要base64解码。php_c...
微信小程序录音波形图
With__Hope的博客
12-04 2014
- 微信小程序录音已经支持 直接输出 pcm 格式的切片，但是pcm又不能直接播放，又需要转为MP3等可播放的格式，所以最后还是选择了使用 js-mp3 来转换，（参考1的老哥说的不需要转换，我没有调试出来有空再琢磨），最后使用转换后的arraybuffer来绘制波形图
小程序录音转声音波形图
12-28
小程序录音输出波形图，需要用到silk-v3-decoder，wavesurfer。如有疑问欢迎私信。
微信小程序录音后上传文件
weixin_33834910的博客
06-07 1721
startRecode:function(){ var s = this; console.log("start"); wx.startRecord({ success: function (res) { console.log(res); var tempFilePat...
上传声音 微信小程序_微信小程序实现录制、试听、上传音频功能（带波形图）...
weixin_39903872的博客
12-22 1405
最近接到这样一个需求，要求实现录制、试听、上传音频功能，选择的是getBackgroundAudioManager,声音录制和播放波形图是用css实现的，效果图及详细设计代码如下：xml文件录制提示00:00:{{currentTime}}开始录好了试听上传上传中重新录制js文件let windowHeight = wx.getSystemInfoSync().windowHeight // 屏幕...
微信小程序 录语音 波浪效果
02-01
在微信小程序中实现录语音功能并配合波浪效果，可以增强用户互动性和视觉体验，尤其是在音乐、教育或者社交类的小程序中较为常见。 录语音功能在微信小程序中可以通过`wx.startRecord`和`wx.stopRecord`这两个API来...
微信小程序录音并上传服务器（带php端源码）
04-14
微信小程序录音并将录音文件上传到服务器源码，包含小程序端录音及播放功能，以及服务器端php上传处理代码。
微信小程序录音与播放录音和上传功能
网络Online
04-22 2476
content: '您已经拒绝访问麦克风，无法使用录音功能，如需使用，请删除此小程序，并重新搜索打开',record_tmpfile: '', // 最近一次录音的临时文件路径;// 停止录音之后，把录取到的音频放在res.tempFilePath。format: 'mp3' // 如果录制acc类型音频则改成aac。uploaded_url: '', // 已上传文件的路径;record_ms: '', // 录音的毫秒数。title: '无法录音',// 录音失败的回调处理。// 播放音频失败的回调。
微信小程序波普图（canvas）生成
09-07
读取mp3波普图，用cavas生成的波普图
微信小程序录音上传功能
风如白话的博客
06-09 3092
微信小程序录音上传 录音弹窗wxml代码： <!-- 录音弹窗 --> <view class="cui-record" hidden="{{isHideRecordModal}}"> <view class="cui-mask" catchtap="cancelRecord" bindtouchmove="cancelRecord"></view> <view class="cui-record-main"> <view c
uni-app+vue2 微信小程序 使用canvas绘制折线图/波形图
hihiword的博客
08-23 2573
第二个，因为canvas坐标轴原点默认在左上角顶点，绘制过程中所有坐标点都是相对于该原点的，如果坐标有负数，则会超出canvas，像使用position超出盒子一样。是这样的：因为我需求是每个格子100个点，1024个点共11个格子，如果一个数据点占据一个像素，那么就需要1024个像素，但移动端显然不可能这么大。第四个，至此，格子已经 画好了，由于格子跟图形是分开的，不能互相影响。整体难度不大，但如果不了解canvas绘图原理，还是很麻烦的，如果看不懂文章，建议先去官网看看，有更好的讲述。
微信小程序实现录音上传
机智如我
05-06 5426
微信小程序实现录音上传准备开始 准备 1.微信开发者工具 2.Api文档 开始 打开微信开发者工具 项目->新建项目 选择小程序 appid是在微信公众平台申请的。 链接 新建完成后，项目自带有模板。结构如图。 audio是我新建的。其余都是项目生成的。 wxml文件相当于html，wxss相当于css文件，json里可以方配置或者临时数据之类的。 在audio.wxml中添加开始录制按...
小程序录音上传服务器,微信小程序录音实现功能并上传(使用node解析接收)
weixin_34287049的博客
08-10 2496
微信小程序录音实现功能并上传(使用node解析接收)发布时间：2020-09-04 11:59:06来源：脚本之家阅读：97作者：weixin_43188227背景我在开发小程序的时候，有需求要实现录音功能，并能上传给服务器。小程序录音功能我是使用的微信的wx.getRecorderManager()实现的，通过该方法创建实例，实例录音得到的文件是本地临时文件，上传文件需要使用微信的wx.uplo...
原生微信小程序上传录音文件
最新发布
chenhuan9的博客
12-19 964
这几天突然接手一个微信小程序项目，工作以后都是用uniapp开发居多，还没有遇到原生微信小程序，记录一下微信小程序上传录用文件。
微信小程序开发中的麦克风录音和音频上传
吃不胖.
06-12 515
引入相关组件和API 麦克风录音和音频上传功能需要使用微信小程序提供的相关组件和API。以上就是实现微信小程序中麦克风录音和音频上传的详细代码案例。通过以上步骤，您可以在微信小程序中轻松实现麦克风录音和音频上传的功能。微信小程序开发中，麦克风录音和音频上传是实现语音功能的重要部分。本文将为您分享详细的代码案例，介绍如何在微信小程序中实现麦克风录音和音频上传功能。引入相关组件和API。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值