Micro-credit program development of audio playback animation instance (real machine available) _javascript tips

Take advantage of the micro-Mail on the weekend to make a simple recorder. To share with you, welcome criticism!

The old rules, first several pictures.

1. In order to come in see clearly. The audio list was not loaded at first. The code moves forward.

2. The microphone will appear when you hold down the recording button. The microphone in the middle is a frame animation.

In fact, is to use JS control picture display hidden. There's nothing to talk about. Here is worth saying is the recording. After the recording API of micro-letter, if the recording time is too short, the recording will fail. So fail still need to be dealt with. The limit of recording time is the same as that of micro-letter voice. 60 seconds.

3. I do not load the list until the recording is complete.

The following figure is the list information obtained from the micro-letter stored file. There are storage paths, creation times, file sizes.

The file here may not be just audio. I'm not judging here. The following path is wx:file//store_ ...

I also went to look for the next. In tencent/micromsg/wxafiles/wx..../this level of directory can be found.

The time is formatted. The file size is B and is converted to KB as follows.

The mobile directory is as follows. But it won't play until it's opened. The reason is unknown.

Here is the full name of the file.

1.tempFilePath: Temporary files after recording. The second access to the applet can not be used normally.

2.savedFilePath: Persistent file path. It is noteworthy that the micro-letter only to 100M storage space. Or upload it to the background as soon as possible.

4. Play audio and video recordings.

Click on the item to hear your voice. Don't be intimidated by yourself. haha.

Code on:
1.index.wxml

<!--index.wxml--> <scroll-view> <view wx:if= "{{voices}}" class= "Common-list" style= "Margin-bottom" : 120rpx; " 
            > <block wx:for= "{Voices}}" > <view class= "Board" > <view class= "Cell" > <view class= "CELL-BD" data-key= "{{Item.filepath}}" bindtap= "Gotoplay" > <view class= "date" > Storage path 
              Path:{{item.filepath}}</view> <view class= "date" > Storage time:{{item.createtime}}</view> <view class= "Date" > Audio size:{{item.size}}kb</view> </view> </ view> </view> </block> </view> </scroll-view> <view wx:if= "{{isspeaking}}" cla ss= "Speak-style" > <image class= sound-style "src=". /.. /images/voice_icon_speech_sound_1.png "></image> <image wx:if=" {{j==2}} "class=" Sound-style "src=". /.. /images/voice_icon_speech_sound_2.png "></image> <image wx:if=" {{j==3}} "Class= "Sound-style" src= ". /.. /images/voice_icon_speech_sound_3.png "></image> <image wx:if=" {{j==4}} "class=" Sound-style "src=". /.. /images/voice_icon_speech_sound_4.png "></image> <image wx:if=" {{j==5}} "class=" Sound-style "src=". /.. /images/voice_icon_speech_sound_5.png "></image> </view> <view class=" Record-style "> <butto 
 n class= "Btn-style" bindtouchstart= "Touchdown" bindtouchend= "Touchup" > Hold recording </button> </view>

 2.INDEX.WXSS

 /**index.wxss**/ 
. speak-style{ 
  position:relative; 
  HEIGHT:240RPX; 
  WIDTH:240RPX; 
  BORDER-RADIUS:20RPX; 
  margin:50% Auto; 
  Background: #26A5FF; 
item-style{ 
  margin-top:30rpx; 
  Margin-bottom:30rpx 
} 
. text-style{ 
  text-align:center 
 
} 
. record-style{ 
  position:fixed; 
  bottom:0; 
  left:0; 
  HEIGHT:120RPX; 
  width:100% 
} 
. btn-style{ 
 margin-left:30rpx; 
 Margin-right:30rpx 
} 
 
. sound-style{ 
 Position:absolute; 
 WIDTH:74RPX; 
 HEIGHT:150RPX; 
 MARGIN-TOP:45RPX; 
 Margin-left:83rpx 
} 
 
 
. board { 
 Overflow:hidden; 
 Border-bottom:2rpx solid #26A5FF;  
} 
/* Column Layout 
/* cell{ 
  Display:flex; 
  Margin:20rpx 
} 
. cell-hd{ 
  margin-left:10rpx; 
  Color: #885A38; 
Cell. cell-bd{ 
  flex:1; 
  position:relative; 
   
} 
/** shows only one line 
/. date{ 
  font-size:30rpx; 
  text-overflow:ellipsis;  
  White-space:nowrap; 
  Overflow:hidden;  
} 

3.index.js

Index.js//Get application instance var app = Getapp () Page ({data: {j:1,//frame animation initial picture isspeaking:false,//is talking voices: [], Audio array}, Onload:function () {},//Finger pressed touchdown:function () {console.log ("finger pressed ...") console.log ("Ne 
  W Date: "+ new Date" var _this = this; 
  Speaking.call (this); This.setdata ({isspeaking:true})//Start recording Wx.startrecord ({success:function (res) {//temporary path, next time you enter applet Unable to work with var TempFilePath = Res.tempfilepath Console.log ("TempFilePath:" + tempfilepath)//Persistent Save Wx.save File ({tempfilepath:tempfilepath, success:function (res) {//persistent path///local file storage size limit of 100M V Ar savedfilepath = Res.savedfilepath console.log ("Savedfilepath:" + Savedfilepath)}) Wx.showtoa St ({title: ' Congratulations! Recording success ', Icon: ' Success ', duration:1000})//Get audio list wx.getsavedfilelist ( 
      {success:function (res) {var voices = []; for (Var i = 0; i < res.fileList.length;  i++) {//format time var createtime = new Date (res.filelist[i].createtime)//convert audio size B to kb var size 
       = (res.filelist[i].size/1024). toFixed (2); 
       var voice = {Filepath:res.filelist[i].filepath, createtime:createtime, size:size};  Console.log ("File path:" + Res.filelist[i].filepath) console.log ("File time:" + createtime) console.log ("File size:" + 
      Size) voices = Voices.concat (voice); 
    } _this.setdata ({voices:voices})}}, Fail:function (res) {//recording failed 
      Wx.showmodal ({title: ' Hint ', content: ' The recording posture is not right! ', Showcancel:false, Success:function (res) { 
 if (res.confirm) {console.log (' user clicks OK ') return}}})},//fingers raised Touchup:function () {console.log ("finger lifted ...") This.setdata ({isspeaking:false,}) clearinterval (This.ti MER) Wx.stoprecord ()},//Click Play recording Gotoplay:function (e) {var filePath = E.currenttarget.dataset.key; Click to start playing Wx.showtoast ({title: ' Start playing ', Icon: ' Success ', duration:1000}) Wx.playvoice ({FilePath : FilePath, Success:function () {wx.showtoast ({title: ' Play End ', Icon: ' Success ', duration:100 
 0})}})//Microphone Frame animation function speaking () {var _this = this; 
 Microphone frame animation var i = 1; 
  This.timer = setinterval (function () {i++; 
  i = i% 5; 
_this.setdata ({j:i})}, 200); 
 }

Attention:

1. Audio recordings By default are local temporary paths. The second access to the applet is not normal to use, you can save a long time, but the local file size limit is 100M, preferably upload background.

2. The recording time should not be too short. Otherwise it will fail or exceed 60 seconds. It will automatically stop recording in 60 seconds.

3. Audio playback cannot play more than one audio at a time. Look at the document. mini-mail program to play audio documents

Demo Code Download: Demo

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.