微信小程序音频播放器
效果：
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 });
梦想也许在今天无法实现,但重要的是,它在你心里。重要的是,你一直在努力。
