微信小程序?qū)崿F(xiàn)錄制、試聽(tīng)、上傳音頻功能（帶波形圖）
更新時(shí)間：2020年02月27日 16:10:48 作者：codezha
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)錄制、試聽(tīng)、上傳音頻功能（帶波形圖）,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
最近接到這樣一個(gè)需求，要求實(shí)現(xiàn)錄制、試聽(tīng)、上傳音頻功能，選擇的是getBackgroundAudioManager,聲音錄制和播放波形圖是用css實(shí)現(xiàn)的，效果圖及詳細(xì)設(shè)計(jì)代碼如下：
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"></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="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="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="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 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>
</view>
</view>
<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 au1"></view>
<view class="auItem au1"></view>
<view class="auItem au2"></view>
<view class="auItem au2"></view>
<view class="auItem au3"></view>
<view class="auItem au3"></view>
<view class="auItem au3"></view>
</view>
<view class="voiceWave1">
<view class="auItem au4"></view>
<view class="auItem au4"></view>
<view class="auItem au5"></view>
<view class="auItem au5"></view>
<view class="auItem au6"></view>
<view class="auItem au6"></view>
<view class="auItem au6"></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 au1"></view>
<view class="auItem au1"></view>
<view class="auItem au1"></view>
<view class="auItem au1"></view>
<view class="auItem au2"></view>
<view class="auItem au2"></view>
<view class="auItem au3"></view>
<view class="auItem au3"></view>
<view class="auItem au3"></view>
<view class="auItem au3"></view>
<view class="auItem au3"></view>
</view>
<view class="voiceWave1">
<view class="auItem au4"></view>
<view class="auItem au4"></view>
<view class="auItem au4"></view>
<view class="auItem au4"></view>
<view class="auItem au5"></view>
<view class="auItem au5"></view>
<view class="auItem au6"></view>
<view class="auItem au6"></view>
<view class="auItem au6"></view>
<view class="auItem au6"></view>
<view class="auItem au6"></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="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 au1"></view>
<view class="auItem au1"></view>
<view class="auItem au2"></view>
<view class="auItem au2"></view>
<view class="auItem au3"></view>
<view class="auItem au3"></view>
<view class="auItem au3"></view>
</view>
<view class="voiceWave1">
<view class="auItem au4"></view>
<view class="auItem au4"></view>
<view class="auItem au5"></view>
<view class="auItem au5"></view>
<view class="auItem au6"></view>
<view class="auItem au6"></view>
<view class="auItem au6"></view>
</view>
</view>
<view class="Wave2">
<view class="voiceWave">
<view class="auItem au1"></view>
<view class="auItem au1"></view>
<view class="auItem au2"></view>
<view class="auItem au2"></view>
<view class="auItem au3"></view>
<view class="auItem au3"></view>
<view class="auItem au3"></view>
</view>
<view class="voiceWave1">
<view class="auItem au4"></view>
<view class="auItem au4"></view>
<view class="auItem au5"></view>
<view class="auItem au5"></view>
<view class="auItem au6"></view>
<view class="auItem au6"></view>
<view class="auItem au6"></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 au1"></view>
<view class="auItem au1"></view>
<view class="auItem au1"></view>
<view class="auItem au1"></view>
<view class="auItem au2"></view>
<view class="auItem au2"></view>
<view class="auItem au3"></view>
<view class="auItem au3"></view>
<view class="auItem au3"></view>
<view class="auItem au3"></view>
<view class="auItem au3"></view>
</view>
<view class="voiceWave1">
<view class="auItem au4"></view>
<view class="auItem au4"></view>
<view class="auItem au4"></view>
<view class="auItem au4"></view>
<view class="auItem au5"></view>
<view class="auItem au5"></view>
<view class="auItem au6"></view>
<view class="auItem au6"></view>
<view class="auItem au6"></view>
<view class="auItem au6"></view>
<view class="auItem au6"></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 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>
</view>
</view>
<view class="voicePointer" style="left:{{currentLeft}}rpx"></view>
</view>
</view>
<view class="handleView" wx:if="{{showhandle1}}">
<view wx:if="{{!voiceState}}" class="CircleBtn green" bindtap="startRecord">開(kāi)始</view>
<view wx:if="{{voiceState}}" class="CircleBtn red" bindtap="shutRecord">錄好了</view>
</view>
<view class="serviceList" wx:if="{{showhandle2}}">
<view class="CircleBtn red" bindtap="listen" bindtap="listenRecord">試聽(tīng)</view>
<view wx:if="{{!uploadState}}" class="CircleBtn green" bindtap="uploadVoice">上傳</view>
<view wx:if="{{uploadState}}" class="CircleBtn blue">上傳中</view>
</view>
<view style="text-align: center;" wx:if="{{showhandle2}}" bindtap="reRecord">重新錄制</view>
</view>
</view>
js文件
let windowHeight = wx.getSystemInfoSync().windowHeight // 屏幕的高度
let screenWidth = wx.getSystemInfoSync().screenWidth
let screenHeight = wx.getSystemInfoSync().screenHeight
let contentHeight = ((windowHeight / screenWidth) * 750 - 184 - 166) + "rpx";
const recorderManager = wx.getRecorderManager()
const backgroundAudioManager = wx.getBackgroundAudioManager()
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
startClick:false,
contentHeight: contentHeight,
voiceState:false,
tempFilePath:'',
recordingTimeqwe:0,//錄音計(jì)時(shí)
setInter:"",//錄音名稱(chēng)
isplay:true, //播放狀態(tài) true--播放中 false--暫停播放
uploadState:false,
showhandle1:true,
showhandle2:false,
showWaveView:false,
currentLeft:10,
currentTime:'00'
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
this.initRecord()
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
*/
onReady: function () {
},
initRecord:function(){
recorderManager.onStart(() => {
console.log('開(kāi)始錄音')
})
recorderManager.onPause(() => {
console.log('暫停錄音')
})
recorderManager.onStop((res) => {
clearInterval(this.data.setInter);
this.setData({voiceState:true,currentLeft:10})
console.log('結(jié)束錄音', res)
const { tempFilePath } = res
this.data.tempFilePath = tempFilePath
})
recorderManager.onFrameRecorded((res) => {
const { frameBuffer } = res
console.log('frameBuffer.byteLength', frameBuffer.byteLength)
})
},
recordingTimer:function(){
var that = this;
//將計(jì)時(shí)器賦值給setInter
this.data.setInter = setInterval(
function () {
let time = that.data.recordingTimeqwe + 1;
if(time>10){
wx.showToast({
title: '錄音時(shí)長(zhǎng)最多10s',
duration:1500,
mask:true
})
clearInterval(that.data.setInter);
that.shutRecord();
return;
}
// console.log(time);
let currentTime = time < 10 ? '0'+time : time;
that.setData({
recordingTimeqwe: time,
currentTime:currentTime,
currentLeft:that.data.currentLeft + 65
})
}
, 1000);
},
startRecord:function(){
if(this.data.startClick){
return
}
this.data.startClick = true
const options = {
duration: 10000,
sampleRate: 44100,
numberOfChannels: 1,
encodeBitRate: 192000,
format: 'aac',
frameSize: 50
}
// 開(kāi)始倒計(jì)時(shí)
this.recordingTimer()
// 開(kāi)始錄音
recorderManager.start(options)
},
shutRecord:function(){
recorderManager.stop()
this.setData({showhandle1:false,showhandle2:true,currentTime:'00'})
},
listenRecord:function(e){
// 試聽(tīng)
let isplay = e.currentTarget.dataset.isplay;
backgroundAudioManager.title = '試聽(tīng)歡迎語(yǔ)'
backgroundAudioManager.src = this.data.tempFilePath
this.setData({
showWaveView:true,
currentLeft:10,
currentTime:'00'
})
backgroundAudioManager.onPlay(() => {
console.log("音樂(lè)播放開(kāi)始")
})
backgroundAudioManager.onEnded(() => {
console.log("音樂(lè)播放結(jié)束")
clearInterval(this.data.setInter1)
this.setData({currentLeft:10,showWaveView:false,currentTime:'00'})
})
backgroundAudioManager.play()
this.data.setInter1 = setInterval(() => {
let time = parseInt(this.data.currentTime) + 1
let currentTime = time < 10 ? '0'+time : time;
// console.log(currentTime)
this.setData({
currentLeft:this.data.currentLeft + 65,
currentTime:currentTime
})
}, 1000);
},
reRecord:function(){
clearInterval(this.data.setInter1)
this.setData({
showhandle1:true,
showhandle2:false,
voiceState:false,
tempFilePath:'',
showWaveView:false,
startClick:false,
currentLeft:10,
recordingTimeqwe:0,
currentTime:'00'
})
},
uploadVoice:function(){
let that = this
this.setData({uploadState:true})
wx.uploadFile({
url: 'https://example.weixin.qq.com/upload', //僅為示例，非真實(shí)的接口地址
filePath: this.data.tempFilePath,
name: 'file',
header:{
"Content-type":"multiply/form-data"
},
formData: {
'time': this.data.recordingTimeqwe
},
success (res){
console.log('上傳成功')
},
fail (res){
console.log('上傳失敗')
that.setData({uploadState:false})
}
})
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
*/
onUnload: function () {
},
/**
* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作
*/
onPullDownRefresh: function () {
},
/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶(hù)點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {
}
})
css文件
.servicePage {
font-family: "PingFangSC-Regular";
}
.top {
font-size: 34rpx;
font-family: "PingFangSC-Medium";
color: #fff;
padding-left: 60rpx;
display: flex;
align-items: center;
height: 150rpx;
}
.content {
border-radius: 36rpx 36rpx 0 0;
background: #fff;
padding: 16rpx 30rpx;
overflow-y: scroll;
}
.allService .title {
text-align:center;
}
.serviceList {
margin-top:300rpx;
display: flex;
justify-content: space-between;
padding: 0 16rpx;
}
.handleView{
margin-top:300rpx;
display: flex;
/* align-items: center; */
justify-content: center;
/* justify-content: space-between; */
padding:0 100rpx;
}
.CircleBtn{
width:100rpx;
height:100rpx;
color:#fff;
text-align:center;
line-height:100rpx;
border-radius:50%;
font-size:28rpx;
}
.green{
background-color:#3ed3ca;
}
.red{
background-color:red;
}
.blue{
background-color: blue;
}
.voiceLine{
position: relative;
background: #eee;
height:40px;
padding:0 10rpx;
overflow: hidden;
}
.voicePointer{
width:2rpx;
height:100rpx;
background: cornflowerblue;
position: absolute;
top:0;
left:10rpx;
}
.voiceBox{
display: flex;
align-items: center;
height:40px;
}
.line1{
height:1px;
background: cornflowerblue;
width:100rpx;
}
.Wave2{
height:40px;
}
.Wave3{
height:40px;
}
.voiceWave{
display: flex;
align-items: flex-end;
height:20px;
}
.voiceWave1{
display: flex;
align-items:flex-start;
height:20px;
}
.auItem{
width:1px;
margin-right:4rpx;
background: cornflowerblue;
height:2px;
}
.au1{
height:8px;
animation: audio1 1s linear .1s infinite ;
}
.au2{
height:6px;
animation: audio2 1s linear .1s infinite ;
}
.au3{
height:4px;
animation: audio3 1s linear .1s infinite ;
}
.au4{
height:8px;
animation: audio4 .5s linear .2s infinite ;
}
.au5{
height:6px;
animation: audio5 .5s linear .5s infinite ;
}
.au6{
height:4px;
animation: audio6 .5s linear .2s infinite ;
}
@keyframes audio1 {
from{height:8px;}
to{height:6px;}
}
@keyframes audio2 {
from{height:6px;}
to{height:4px;}
}
@keyframes audio3 {
from{height:4px;}
to{height:2px;}
}
@keyframes audio4 {
from{height:6px;}
to{height:8px;}
}
@keyframes audio5 {
from{height:4px;}
to{height:6px;}
}
@keyframes audio6 {
from{height:2px;}
to{height:4px;}
}
.serviceList .box {
width: 200rpx;
height: 220rpx;
background: #eee;
padding: 4rpx;
border-radius: 8rpx;
}
.serviceList .box view.free{
position: absolute;
left:-10rpx;
top:0;
width:108rpx;
height:42rpx;
line-height: 42rpx !important;
padding:0;
}
.serviceList .box view.free text{
display: inline-block;
color:#fff;
position: absolute;
font-size: 24rpx;
text-align: center;
width:108rpx;
top:-4rpx;
}
.box .free image{
width:108rpx;
height:42rpx;
}
.serviceList .box view:first-child {
height: 80rpx;
line-height: 80rpx;
font-size: 30rpx;
text-align: center;
}
.serviceList .box view:last-child {
font-family: "PingFangSC-Semibold";
border-radius: 0 0 8rpx 8rpx;
height: 140rpx;
background: #fff;
font-size: 72rpx;
text-align: center;
line-height: 135rpx;
vertical-align: top;
position: relative;
}
.serviceList .box view:last-child text {
font-size: 26rpx;
}
.box.active {
background: #ffd458;
}
.box.active view:last-child {
background: #fffbea;
}
.bottom {
position: fixed;
width: 100%;
height: 184rpx;
background: #fff;
box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.10);
bottom: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0 30rpx 60rpx 30rpx;
}
.bottom .left view.all {
font-size: 34rpx;
font-family: "PingFangSC-Semibold";
line-height: 48rpx;
display: flex;
align-items: center;
margin-bottom: 10rpx;
}
.bottom .left view.agree {
font-size: 24rpx;
display: flex;
align-items: center;
}
.bottom .left view.agree text {
color: #bbb;
}
.bottom .left view text.colorBlue {
color: #419bf9;
}
.bottom .right {
width: 200rpx;
background: #3ed3ca;
border-radius: 40rpx;
line-height: 80rpx;
text-align: center;
font-size: 30rpx;
color: #fff;
}
.rightsInfo {
margin-top: 60rpx;
padding-right: 16rpx;
}
.rightsInfo::before {
display: table;
content: '';
}
.rightsInfo .title {
font-size: 32rpx;
display: flex;
align-items: center;
letter-spacing: 0.26px;
}
.rightsInfo .title image {
width: 40rpx;
height: 40rpx;
margin-right: 14rpx;
}
.rightsInfo .rightsList {
display: flex;
align-items: center;
margin-top: 40rpx;
}
.rightsInfo .rightsList .left {
width: 80rpx;
height: 80rpx;
margin-right: 20rpx;
}
.rightsInfo .rightsList .left image {
width: 80rpx;
height: 80rpx;
}
.rightsInfo .rightsList .right .rightTitle {
font-family: "PingFangSC-Medium";
font-size: 30rpx;
color: #333;
letter-spacing: 0.24px;
line-height: 24px;
}
.rightsInfo .rightsList .right .rightDes {
font-size: 24rpx;
color: #a5a5a5;
letter-spacing: 0;
}
總結(jié)
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)錄制、試聽(tīng)、上傳音頻功能（帶波形圖）的文章就介紹到這了,更多相關(guān)微信小程序?qū)崿F(xiàn)錄制試聽(tīng)上傳音頻內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript判斷對(duì)象和數(shù)組的兩種方法
這篇文章主要介紹了JavaScript判斷對(duì)象和數(shù)組的兩種方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
前端實(shí)現(xiàn)批量下載并打包成ZIP文件的步驟及示例
下載我相信很多小伙伴并不陌生,下載文件的形式也有很多,下面這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)批量下載并打包成ZIP文件的步驟及示例,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
數(shù)據(jù)排序誰(shuí)最快(javascript中的Array.prototype.sort PK 快速排序)
今天在51js論壇中看到一個(gè)網(wǎng)友發(fā)布了一個(gè)javasctipt實(shí)現(xiàn)的快速排序的算法，前些日子工作中也涉及到j(luò)avasctipt中數(shù)據(jù)排序的應(yīng)用，當(dāng)時(shí)為了提高排序速度，使用的也是快速排序的算法。2007-01-01
STL是一種用于表示3D模型表面的文件格式,通常由三角形面片組成,STL 文件可以是ASCII（文本）或二進(jìn)制格式,其中二進(jìn)制格式更為常見(jiàn),因?yàn)樗o湊且加載速度更快,本文給大家介紹了javascript加載導(dǎo)出 STL文件的示例,需要的朋友可以參考下2024-12-12
js對(duì)table的td進(jìn)行相同內(nèi)容合并示例詳解
正如標(biāo)題所言如何對(duì)table的td進(jìn)行相同內(nèi)容合并，下面為大家詳細(xì)介紹下使用js是如何做到的，感興趣的朋友不要錯(cuò)過(guò)2013-12-12
LRU是Least?Recently?Used的縮寫(xiě)，即最近最少使用。作為一種經(jīng)典的緩存策略，它的基本思想是長(zhǎng)期不被使用的數(shù)據(jù)，在未來(lái)被用到的幾率也不大，所以當(dāng)新的數(shù)據(jù)進(jìn)來(lái)時(shí)我們可以?xún)?yōu)先把這些數(shù)據(jù)替換掉。本文用JavaScript實(shí)現(xiàn)這一算法，需要的可以參考一下2022-09-09
本文主要介紹了JS 異步遍歷的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)輪播圖效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
自從我寫(xiě)了幾個(gè)還可以拿出手的東東之后，自我感覺(jué)牛B了許多，還有不少同志圍著我，稱(chēng)我為高手，虛容心大大的得到了滿(mǎn)足。這些是后話(huà)，暫且不表。。。2008-03-03
JS中使用new Date(str)創(chuàng)建時(shí)間對(duì)象不兼容firefox和ie的解決方法(兩種)
這篇文章主要介紹了JS中使用new Date(str)創(chuàng)建時(shí)間對(duì)象不兼容firefox和ie的解決方法的相關(guān)資料,需要的朋友可以參考下2016-12-12