微信小程序音频（录制、播放、重录）功能_微信小程序录音功能可以录几个声音-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41519423/article/details/104477961

本文介绍了如何在微信小程序中实现音频功能，包括录制音频、播放音频以及重录功能。通过展示相关图片、WXML、JS和WXSS代码，详细解析了实现这些功能的步骤和关键代码。

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

1、图片展示及相关图片

2、wxml代码：

<view class="" >
  <view class="recordingPlace">
    <view class="remind_text">注：最长录制5分钟哦</view>
        <view class="recordingBox">
            <view class="timing">{
  {times}}</view>
            <view class="timingBtn">
                <view class="main_btn" bindtap="start" wx:if="{
  {button.start}}">
                    <image src="/images/img/progress_point.png"/>
                </view>
                <view class="main_btn" bindtap="pause" wx:if="{
  {button.pause}}">
                    <image src="/images/img/play.png"/>
                </view>
                <view class="main_btn" bindtap="resume" wx:if="{
  {button.resume}}">
                    <image src="/images/img/progress_point.png"/>
                </view>
                <view class="finish" bindtap='stop'>
                    <image src="/images/img/finish_audio.png"/>
                </view>
              </view>
      </view>
  </view>
</view>

<!-- ****试听**** -->
<view class='mainAudio' hidden="{
  {!isAudition}}">
  <!-- <view class='maskpage' bindtap='hideAudio'></view> -->
  <view class='popup_page'>
    <view class='audio_title'>试听</view>
    <!--语音-->
    <view class='audioPlayer'>
      <view class='player'>
        <view class='audioControls'>
          <view class='flex'>
            <view class='time'>
              {
  {showTime1}}
            </view>
            <view class='slider flex-y-center'>
              <slider bindchange='sliderChange' activeColor='red' block-size="12" value='{
  {audioTime}}' />
            </view>
            <view class='time'>
              {
  {showTime2}}
            </view>
          </view>
          <view class='player_btn flex flex-x-between'>
            <view class='bottom flex-y-center flex-x-center' catchtap='playAudio'>
              <!-- 按钮 -->
              <view wx:if="{
  {isPlayAudio}}">
                <image src='/images/img/play.png' />
              </view>
              <view wx:else>
                <image src='/images/img/pause.png' />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

<!-- 保存 -->
<view class="footerView">
  <view class="recodeSave" bindtap="navigateBack">
    <text style="left: 40%;position: relative;">保存</text>
  </view>