微信小程序开发录音机音频播放及动画实现教程

why 240 2024-09-29

本文主要和大家分享微信小程序开发录音机、音频播放、动画，希望能帮助到大家。

1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可.

image.png

2.按住 录音按钮的时候会出现麦克风.中间的麦克风是个帧动画.

其实就是用js控制图片显示隐藏.没啥好说的.这里值得说一说的是录音.微信的录音API后,如果录音时间太短,会录音失败.所以fail的时候还是需要处理一下.录音时间的限制和微信语音是一样的.60秒.

image.png

3.我在录音完成后才加载列表.

下图就是从微信存储的文件里获取到的列表信息.有储存路径,创建时间,文件大小.

这里的文件可能不只是音频.这里我没做判断.下面的路径都是wx:file//store_...

我也去找了下.在Tencent/micromsg/wxafiles/wx..../这一级目录就能找到了.

时间是格式化之后的.文件大小是B,转成KB如下.

image.png

手机目录如下.但是打开之后播放不了.目前原因不明.


image.png

下面是文件全名称.

1.tempFilePath : 录音之后的临时文件.第二次进入小程序就不能正常使用了.

2.savedFilePath :持久保存的文件路径.值得注意的是微信只给100M的储存空间.还是尽早上传到后台吧.

image.png


4.播放录音音频.

点击item就能听到你的声音了.别被自己吓住.哈哈.

image.png

上代码:

1.index.wxml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!--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">存储路径:{{item.filePath}}</view> 

                        <view  class="date" >存储时间:{{item.createTime}}</view> 

                        <view  class="date">音频大小:{{item.size}}KB</view> 

                    </view>     

                </view> 

            </view> 

        </block> 

    </view> 

</scroll-view>  

<view  wx:if="{{isSpeaking}}"  class="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"> 

    <button class="btn-style" bindtouchstart="touchdown" bindtouchend="touchup">按住 录音</button> 

</view>


2.index.wxss

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

/**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;   

} 

/*列布局*/ 

.cell{ 

    display: flex; 

    margin: 20rpx; 

} 

.cell-hd{ 

    margin-left: 10rpx; 

    color: #885A38; 

} 

.cell .cell-bd{ 

    flex:1; 

    position: relative; 

      

} 

/**只显示一行*/ 

.date{ 

    font-size: 30rpx; 

    text-overflow: ellipsis;  

    white-space:nowrap; 

    overflow:hidden;  

}


3.index.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

//index.js 

//获取应用实例 

var app = getApp() 

Page({ 

  data: { 

    j: 1,//帧动画初始图片 

    isSpeaking: false,//是否正在说话 

    voices: [],//音频数组 

  }, 

  onLoad: function () { 

  }, 

  //手指按下 

  touchdown: function () { 

    console.log("手指按下了...") 

    console.log("new date : " + new Date) 

    var _this = this; 

    speaking.call(this); 

    this.setData({ 

      isSpeaking: true 

    }) 

    //开始录音 

    wx.startRecord({ 

      success: function (res) { 

        //临时路径,下次进入小程序时无法正常使用 

        var tempFilePath = res.tempFilePath 

        console.log("tempFilePath: " + tempFilePath) 

        //持久保存 

        wx.saveFile({ 

          tempFilePath: tempFilePath, 

          success: function (res) { 

            //持久路径 

            //本地文件存储的大小限制为 100M 

            var savedFilePath = res.savedFilePath 

            console.log("savedFilePath: " + savedFilePath) 

          } 

        }) 

        wx.showToast({ 

          title: &#39;恭喜!录音成功&#39;, 

          icon: &#39;success&#39;, 

          duration: 1000 

        }) 

        //获取录音音频列表 

        wx.getSavedFileList({ 

          success: function (res) { 

            var voices = []; 

            for (var i = 0; i < res.fileList.length; i++) { 

              //格式化时间 

              var createTime = new Date(res.fileList[i].createTime) 

              //将音频大小B转为KB 

              var size = (res.fileList[i].size / 1024).toFixed(2); 

              var voice = { filePath: res.fileList[i].filePath, createTime: createTime, size: size }; 

              console.log("文件路径: " + res.fileList[i].filePath) 

              console.log("文件时间: " + createTime) 

              console.log("文件大小: " + size) 

              voices = voices.concat(voice); 

            } 

            _this.setData({ 

              voices: voices 

            }) 

          } 

        }) 

      }, 

      fail: function (res) { 

        //录音失败 

        wx.showModal({ 

          title: &#39;提示&#39;, 

          content: &#39;录音的姿势不对!&#39;, 

          showCancel: false, 

          success: function (res) { 

            if (res.confirm) { 

              console.log(&#39;用户点击确定&#39;) 

              return 

            } 

          } 

        }) 

      } 

    }) 

  }, 

  //手指抬起 

  touchup: function () { 

    console.log("手指抬起了...") 

    this.setData({ 

      isSpeaking: false, 

    }) 

    clearInterval(this.timer) 

    wx.stopRecord() 

  }, 

  //点击播放录音 

  gotoPlay: function (e) { 

    var filePath = e.currentTarget.dataset.key; 

    //点击开始播放 

    wx.showToast({ 

      title: &#39;开始播放&#39;, 

      icon: &#39;success&#39;, 

      duration: 1000 

    }) 

    wx.playVoice({ 

      filePath: filePath, 

      success: function () { 

        wx.showToast({ 

          title: &#39;播放结束&#39;, 

          icon: &#39;success&#39;, 

          duration: 1000 

        }) 

      } 

    }) 

  } 

}) 

//麦克风帧动画 

function speaking() { 

  var _this = this; 

  //话筒帧动画 

  var i = 1; 

  this.timer = setInterval(function () { 

    i++; 

    i = i % 5; 

    _this.setData({ 

      j: i 

    }) 

  }, 200); 

}

注意:

1.录音的音频默认是存在本地的临时路径下.第二次进入小程序无法正常使用,可以存持久,但是本地文件大小的限制是100M,最好还是上传后台.

2.录音的时间不能太短.否则会失败;也不能超过60秒.到了60秒会自动停止录音.

3.音频播放不能同时播放多个音频.看文档.微信小程序 播放音频文档


版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 js 实例
上一篇:微信小程序实现 image 图片自适应宽度全攻略
下一篇:微信小程序模拟下拉菜单开发实例详细步骤解析
相关文章

 发表评论

暂时没有评论，来抢沙发吧~