• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序音频播放器

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

效果:

 

 HTML

 1     <view class="audio_palyer">
 2       <text>00:00</text>
 3       <slider bindchange="sliderchange" bindtouchstart="sliderStart" bindtouchend="sliderEnd" value="{{audioValue}}" block-size="14" activeColor="#666" style="width:388rpx" />
 4       <text>{{duration}}</text>
 5       <view bind:tap="play" wx:if="{{isplay==false}}">
 6         <text class="iconfont iconfontPlay"></text>
 7       </view>
 8       <view bind:tap="stop" wx:else>
 9         <text class="iconfont iconfontStop"></text>
10       </view>
11     </view>

 

JS

  1  
2

3
let myaudio = null; 4 5 Page({ 6 data: { 7 isplay: false, //是否播放 8 isMove: false, 9 audioValue: 0, 10 duration: "00:00", 11 }, 12 onLoad:function(){ 13 myaudio = wx.createInnerAudioContext(); 14 myaudio.src = "link"; 15 this._f(); 16  }, 21 onUnload: function () { 22 console.log("onUnload"); 23 myaudio.destroy(); 24 }, 25 formatSeconds(value) { 26 let result = parseInt(value); 27 let h = 28 Math.floor(result / 3600) < 10 29 ? "0" + Math.floor(result / 3600) 30 : Math.floor(result / 3600); 31 let m = 32 Math.floor((result / 60) % 60) < 10 33 ? "0" + Math.floor((result / 60) % 60) 34 : Math.floor((result / 60) % 60); 35 let s = 36 Math.floor(result % 60) < 10 37 ? "0" + Math.floor(result % 60) 38 : Math.floor(result % 60); 39 40 let res = ""; 41 if (h !== "00") res += `${h}:`; 42 if (m !== "00") res += `${m}:`; 43 res += `${s}`; 44 return res; 45 }, 46 _f() { 47 myaudio.autoplay = false; 48 myaudio.onCanplay(() => { 49 setTimeout(() => { 50 console.log(myaudio.duration, "myAudio.duration"); 51 }, 1000); 52 }); 53 myaudio.onPlay(() => { 54 console.log("开始播放"); 55 this.setData({ 56 isMove: false, 57 }); 58 }); 59 myaudio.onError((res) => { 60 console.log(res.errMsg); 61 console.log(res.errCode); 62 }); 63 myaudio.onTimeUpdate((res) => { 64 // console.log( 65 // myaudio.currentTime, 66 // "onTimeUpdate", 67 // myaudio.paused, 68 // "paused" 69 // ); 70 if (this.data.isMove) return; 71 let audioValue = Math.floor( 72 (myaudio.currentTime / myaudio.duration) * 100 73 ); 74 75 this.setData({ 76 audioValue, 77 }); 78 }); 79 myaudio.onWaiting((res) => { 80 console.log(res, "onWaiting"); 81 }); 82 myaudio.onPause((res) => { 83 this.setData({ isplay: false }); 84 }); 85 myaudio.onStop((res) => { 86 console.log(res, "onStop"); 87 }); 88 myaudio.onEnded((res) => { 89 this.setData({ isplay: false }); 90 }); 91 }, 92 93 sliderchange(e) { 94 const position = e.detail.value; 95 let audioPosition = Math.floor((position / 100) * myaudio.duration); 96 // console.log(audioPosition, "audioPosition"); 97 myaudio.seek(audioPosition); 98 }, 99 sliderStart(e) { 100 this.setData({ 101 isMove: true, 102 }); 103 }, 104 sliderEnd(e) { 105 console.log(e, "end"); 106 }, 107 play: function () { 108 this.setData({ isplay: true }); 109 myaudio.play(); 110 let time = myaudio.duration; 111 if (time !== 0) { 112 let duration = this.formatSeconds(myaudio.duration); 113 this.setData({ 114 duration, 115 }); 116 } 117 }, 118 119 // 停止 120 121 stop: function () { 122 myaudio.pause(); 123 this.setData({ isplay: false }); 124 }, 125 });

 

 

 

 

 

梦想也许在今天无法实现,但重要的是,它在你心里。重要的是,你一直在努力。

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序实现下拉刷新发布时间:2022-07-18
下一篇:
小程序开发基本步骤发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap