wxml代码:
1. <!-- 录音 -->
2. <view>
3. <!-- 预览 -->
4. <view wx:if="{{voice}}">
5. <view class='yy_box'>
6. <view class='yy_box_bg' bindtap='play'>
7. <view class="yy_box_icon {{onPlay?'audio-animation':''}}"></view>
8. </view>
9. <text>{{playDuration}}"</text>
10. </view>
11. </view>
12. <!-- 录音按钮 -->
13. <view class='recorder'>
14. <button bindtouchstart='recorderS' bindtouchend='recorderE'>按住说话</button>
15. </view>
16. </view>
17. </view>
wxss代码:
1. .yy_box {
2. display: flex;
3. align-items: center;
4. }
5.
6. .yy_box_bg {
7. width: 130px;
8. height: 30px;
9. background-color: #9eea6a;
10. margin: 0 10px;
11. border-radius: 5px;
12. }
13.
14. .yy_box_bg::before {
15. content: '';
16. display: block;
17. width: 0;
18. height: 0;
19. border-top: 5px solid transparent;
20. border-right: 10px solid #9eea6a;
21. border-bottom: 5px solid transparent;
22. position: relative;
23. left: -10px;
24. top: 10px;
25. }
26.
27. .yy_box_icon {
28. width: 11.5px;
29. height: 14.5px;
30. background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAABXCAYAAADvct7MAAAEWElEQVRYhe2Zz0sjZxjH37/iGWLe6QRHl7A4RBoliFGEtLCXRZQqrIoQ8VAICKIe0kPIQqJx/TGCxDgzeecNe1loD0tvhW6PLWwPpXR7KT0slBbEslQpsixZNj00b5h9fScz68xpNw/Mxdf388w87/M879dHhHrWsw/EAEBiT6hgRVEilNJzwzBalNJzjHE0NCe2bT83DKPlfNLpdCIUBwcHB1/ycMMwWmNjY1pgOABIuq4/5uG2bZ+F8vYAIFFKz3gHiUTiVmA4QgjlcrkcD19fX18PBT49Pf0JD9/a2voiMBgApJ2dHcLDl5eXPwsMTyQSt0QZoyhKJBBYluU+QkiTB+/t7T0KnC2Li4szgjR8HloaGobxEwMfHx9/F2qPAQAplUrdDq3se9aznvXMxQBASqfTCU3T+kNvZKenp09Zp9R1/evQHCwsLEzzPZ4Q0gxFjWGMo6LbyTCMlqZp/e8EAwCVPexnAwMDmGlI/gt8360Y40FK6WVbiF7GYrE4c9IWqS94B77PgBByTWmNj49PMAfxeDwmCk88Ho95wvf3978RbZ6amppqh0wqFosP+PVSqVT1hAOAenR09ESgAK6c4eHXKaXnnnDmwLbtCx4wPDw8yt6ej71pmi3fabm2tpbn4RsbG2W2blnWM37dN3x2dvaaOMrn87oD/uuN4ACgViqVr/jNKysrnzvC8lbY6vX6Gz/wjzRNS4oyBmM8iND/FSs40D893xpjPFiv19/wmw8PD5+0q1aqVCqUXy8Wiw884UtLS1lBiZ+xNEylUrdFXyXLcp8nHABU0zR/Y5uq1eqPDIwxjlJKX/Lg3d3dh74zBQDUZDKZmpycnGRgVVVlSumVINYXgdtuuVyuCcBXgf/aQAihoaEhlUu930O7jQBAUhQlUiqVqqurq8s93f6eGQBI7aI6o5S+ymQyo6FmT6BKfVc4KyxZlvsCOQEAaW5u7o5pmtcc+FYDTphIiGqa1i/qOYSQpt9O2VWIYoyjjUbjX96BrxbhR4hqmtZvWda1SyaXy+W6wv0K0ZmZmU8Fb//23SqaiLoJUdu2X7O2CwDSycnJ9/zvFAqFCkKo+0TUjxDlWzNLTwCQPCeiXkIUACSRYBoZGRlynYhOTEx8zDZ7CdFsNntPqA7cJqKU0n+c4RGsd4SoqHpN0/ylsyiaiCaTybhj3VWIAoBECHnNOX/RyRjRRHRzc3OLrXsJ0UajccnBX3bgooloPp+/74B3FaJ8S+jA3Sai2Wz2niMsrkK0HZYmB79ACHlPRL2EqOhALct65joR1XX9MataLyE6Pz9/l1/f3t42PSeiXkK03UF/ENZJt4moHyEqChkhpNk5bNFE1I8QdSvAcrlcQ93MjxDNZDKj3ULmal5CtB2yVzy4UChUPG+jbkIUACTbtv8QfFmw/9AoihKxbfsvQaNqYYyjNwYjhJBhGD/fKM5+rNFo/C065FCUl6IokVqt9rRdE992g/4H+ecsUNqAjLcAAAAASUVORK5CYII=) no-repeat;
31. background-size: 11.5px 43.5px;
32. background-position: 0 -29px; /* 默认第三张 */
33. position: relative;
34. left: 15px;
35. top: -2px;
36. }
37. .audio-animation {
38. animation: voiceplay 2s infinite step-start;
39. }
40. @keyframes voiceplay{
41. 0%, 100%{
42. background-position: 0 -29px;
43. }
44. 33.333%{
45. background-position: 0 0;
46. }
47. 66.666%{
48. background-position: 0 -14.5px;
49. }
50. }
51. .yy_box text {
52. color: #999;
53. }
js代码:
1. data: {
2. recorderTempFilePath:'', // 录音地址
3. playDuration: '', // 播放时间
4. onPlay:false, // 播放状态样式判断
5. voice: false, // 预览语音显示
6. },
7. // 按住录音
8. recorderS:function(){
9. const options = {
10. duration: 600000,
11. sampleRate: 44100,
12. numberOfChannels: 1,
13. encodeBitRate: 192000,
14. format: 'mp3',
15. frameSize: 50
16. }
17. // 开始录音
18. recorderManager.start(options);
19. recorderManager.onStart(() => {
20. // console.log('recorder start')
21. wx.showLoading({
22. title: '录音中...',
23. })
24.
25. })
26. //错误回调
27. recorderManager.onError((res) => {
28. console.log(res);
29. wx.hideLoading();
30. wx.showToast({
31. title: res,
32. icon: 'success',
33. duration: 1000
34. })
35. })
36. },
37. // 录音结束
38. recorderE:function(){
39. let that = this;
40. // 结束录音
41. recorderManager.stop();
42. recorderManager.onStop((res) => {
43. wx.hideLoading();
44. wx.showToast({
45. title: '录音结束',
46. icon: 'success',
47. duration: 1000
48. })
49. // console.log('recorder stop', res)
50. const { tempFilePath, duration } = res
51. let recorderTempFilePath = tempFilePath;
52. let playDuration = Math.ceil(duration / 1000);
53. that.setData({
54. recorderTempFilePath: recorderTempFilePath,
55. playDuration: playDuration,
56. voice: true
57. })
58. })
59. },
60. // 播放录音
61. play:function(){
62. let that = this;
63. let recorderTempFilePath = that.data.recorderTempFilePath;
64. innerAudioContext.autoplay = true
65. innerAudioContext.src = recorderTempFilePath
66. innerAudioContext.onPlay(() => {
67. // console.log('开始播放')
68.
69. that.setData({
70. onPlay:true
71. })
72. })
73. innerAudioContext.onError((res) => {
74. // console.log(res.errMsg)
75. // console.log(res.errCode)
76. wx.showToast({
77. title: res.errMsg,
78. icon: 'success',
79. duration: 2000
80. })
81. })
82. // 播放结束
83. innerAudioContext.onEnded((res)=>{
84. that.setData({
85. onPlay: false
86. })
87. })
88. },