diy_voice.js
5.76 KB
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
const app = getApp()
const innerAudioContext = wx.createInnerAudioContext();
var t = getApp(),
o = t.globalData.setting;
Component({
properties: {
object: {
type: Object,
value: null,
},
audiosrc:{
type: String,
value: null,
},
},
data: {
yc:false,
isPlayAudio: false,
audioSeek: 0,
audioDuration: 0,
showTime1: '00:00',
showTime2: '00:00',
audioTime: 0,
voice_logo:null,
imghost: o.imghost,
},
ready: function() {
console.log("ready");
var music = this.data.object.music;
var vo = this.data.object;
this.setData({
audiosrc:music,
// logo:"http://jmh.xinda100.cn"+logo
})
this.Initialization();
this.loadaudio();
console.log("logo");
console.log(vo);
this.logo(vo);
},
methods: {
logo(vo){
console.log(111111);
console.log(vo.logo);
var v_logo=vo.logo;
if (!(vo.logo.indexOf("/public/static/images/model/logo.png"))){
this.setData({
voice_logo:"https://mshopimg.yolipai.net/miniapp/images/logo.png"
})
}else{
this.setData({
voice_logo:v_logo
})
}
},
// 这里是一个自定义方法
//初始化播放器，获取duration
Initialization() {
var t = this;
if (this.properties.audiosrc.length != 0) {
//设置src
innerAudioContext.src = this.properties.audiosrc;
//运行一次
innerAudioContext.play();
innerAudioContext.pause();
innerAudioContext.onCanplay(() => {
//初始化duration
innerAudioContext.duration
setTimeout(function () {
//延时获取音频真正的duration
var duration = innerAudioContext.duration;
var min = parseInt(duration / 60);
var sec = parseInt(duration % 60);
if (min.toString().length == 1) {
min = `0${min}`;
}
if (sec.toString().length == 1) {
sec = `0${sec}`;
}
t.setData({
audioDuration: innerAudioContext.duration,
showTime2: `${min}:${sec}`
});
}, 1000)
})
}
},
//拖动进度条事件
sliderChange(e) {
var that = this;
innerAudioContext.src = this.properties.audiosrc;
//获取进度条百分比
var value = e.detail.value;
this.setData({
audioTime: value
});
var duration = this.properties.audioDuration;
//根据进度条百分比及歌曲总时间，计算拖动位置的时间
value = parseInt(value * duration / 100);
//更改状态
this.setData({
audioSeek: value,
isPlayAudio: true
});
//调用seek方法跳转歌曲时间
innerAudioContext.seek(value);
//播放歌曲
innerAudioContext.play();
},
//播放、暂停按钮
playAudio() {
//获取播放状态和当前播放时间
var isPlayAudio = this.data.isPlayAudio;
var seek = this.properties.audioSeek;
innerAudioContext.pause();
//更改播放状态
this.setData({
isPlayAudio: !isPlayAudio
})
if (isPlayAudio) {
//如果在播放则记录播放的时间seek，暂停
this.setData({
audioSeek: innerAudioContext.currentTime
});
} else {
//如果在暂停，获取播放时间并继续播放
innerAudioContext.src = this.properties.audiosrc;
if (innerAudioContext.duration != 0) {
this.setData({
audioDuration: innerAudioContext.duration
});
}
//跳转到指定时间播放
innerAudioContext.seek(seek);
innerAudioContext.play();
}
},
loadaudio() {
var that = this;
//设置一个计步器
this.properties.durationIntval = setInterval(function () {
//当歌曲在播放时执行
if (that.data.isPlayAudio == true) {
//获取歌曲的播放时间，进度百分比
var seek = that.properties.audioSeek;
var duration = innerAudioContext.duration;
var time = that.properties.audioTime;
time = parseInt(100 * seek / duration);
//当歌曲在播放时，每隔一秒歌曲播放时间+1，并计算分钟数与秒数
var min = parseInt((seek + 1) / 60);
var sec = parseInt((seek + 1) % 60);
//填充字符串，使3:1这种呈现出 03：01 的样式
if (min.toString().length == 1) {
min = `0${min}`;
}
if (sec.toString().length == 1) {
sec = `0${sec}`;
}
var min1 = parseInt(duration / 60);
var sec1 = parseInt(duration % 60);
if (min1.toString().length == 1) {
min1 = `0${min1}`;
}
if (sec1.toString().length == 1) {
sec1 = `0${sec1}`;
}
//当进度条完成，停止播放，并重设播放时间和进度条
if (time >= 100) {
innerAudioContext.stop();
that.setData({
audioSeek: 0,
audioTime: 0,
audioDuration: duration,
isPlayAudio: false,
showTime1: `00:00`
});
return false;
}
//正常播放，更改进度信息，更改播放时间信息
that.setData({
audioSeek: seek + 1,
audioTime: time,
audioDuration: duration,
showTime1: `${min}:${sec}`,
showTime2: `${min1}:${sec1}`
});
}
}, 1000);
},
onUnload: function () {
//卸载页面，清除计步器
clearInterval(this.properties.durationIntval);
},
customMethod: function () { }
}
})