Skip to content

Commit cf59728

Browse files
DIYgodDIYgod
committed
better better handling play promise
1 parent 75b86a6 commit cf59728

1 file changed

Lines changed: 65 additions & 64 deletions

File tree

‎src/js/player.js‎

Lines changed: 65 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ class APlayer {
2424
constructor (options) {
2525
this.options = handleOption(options);
2626
this.container = this.options.container;
27-
this.audios = [];
2827
this.playIndex = 0;
2928
this.paused = true;
3029

@@ -184,44 +183,45 @@ class APlayer {
184183
* Set music
185184
*/
186185
setAudio (index) {
187-
if (typeof index !== 'undefined') {
188-
this.playIndex = index;
189-
}
186+
this.handlePlayPromise(() => {
187+
if (typeof index !== 'undefined') {
188+
this.playIndex = index;
189+
}
190190

191-
// set html
192-
if (this.options.music[this.playIndex].pic) {
193-
this.template.pic.style.backgroundImage = `url('${this.options.music[this.playIndex].pic}')`;
194-
}
195-
else {
196-
this.template.pic.style.backgroundImage = '';
197-
}
198-
this.template.title.innerHTML = this.options.music[this.playIndex].title;
199-
this.template.author.innerHTML = this.options.music[this.playIndex].author ? ' - ' + this.options.music[this.playIndex].author : '';
200-
const light = this.container.getElementsByClassName('aplayer-list-light')[0];
201-
if (light) {
202-
light.classList.remove('aplayer-list-light');
203-
}
204-
this.container.querySelectorAll('.aplayer-list li')[this.playIndex].classList.add('aplayer-list-light');
191+
// set html
192+
if (this.options.music[this.playIndex].pic) {
193+
this.template.pic.style.backgroundImage = `url('${this.options.music[this.playIndex].pic}')`;
194+
}
195+
else {
196+
this.template.pic.style.backgroundImage = '';
197+
}
198+
this.template.title.innerHTML = this.options.music[this.playIndex].title;
199+
this.template.author.innerHTML = this.options.music[this.playIndex].author ? ' - ' + this.options.music[this.playIndex].author : '';
200+
const light = this.container.getElementsByClassName('aplayer-list-light')[0];
201+
if (light) {
202+
light.classList.remove('aplayer-list-light');
203+
}
204+
this.container.querySelectorAll('.aplayer-list li')[this.playIndex].classList.add('aplayer-list-light');
205205

206-
this.template.list.scrollTop = this.playIndex * 33;
206+
this.template.list.scrollTop = this.playIndex * 33;
207207

208-
this.handlePlayPromise(() => {
209208
this.audio.src = this.options.music[this.playIndex].url;
210209
this.seek(0);
211-
});
212-
if (this.paused) {
213-
this.pause();
214-
}
215-
else {
216-
this.play();
217-
}
218210

219-
this.lrc && this.lrc.switch(this.playIndex);
211+
if (this.paused) {
212+
this.pause();
213+
}
214+
else {
215+
this.play();
216+
}
217+
218+
this.lrc && this.lrc.switch(this.playIndex);
220219

221-
// set duration time
222-
if (this.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first
223-
this.template.dtime.innerHTML = this.audio.duration ? utils.secondToTime(this.audio.duration) : '00:00';
224-
}
220+
// set duration time
221+
if (this.audio.duration !== 1) { // compatibility: Android browsers will output 1 at first
222+
this.template.dtime.innerHTML = this.audio.duration ? utils.secondToTime(this.audio.duration) : '00:00';
223+
}
224+
});
225225
}
226226

227227
seek (time) {
@@ -240,53 +240,53 @@ class APlayer {
240240
* Play music
241241
*/
242242
play () {
243-
if (this.paused) {
244-
this.paused = false;
245-
this.template.button.classList.remove('aplayer-play');
246-
this.template.button.classList.add('aplayer-pause');
247-
this.template.button.innerHTML = '';
248-
setTimeout(() => {
249-
this.template.button.innerHTML = Icons.pause;
250-
}, 100);
251-
}
252-
253243
this.handlePlayPromise(() => {
254-
this.playedPromise = Promise.resolve(this.audio.play());
255-
this.playedPromise.catch(() => {
244+
if (this.paused) {
245+
this.paused = false;
246+
this.template.button.classList.remove('aplayer-play');
247+
this.template.button.classList.add('aplayer-pause');
248+
this.template.button.innerHTML = '';
249+
setTimeout(() => {
250+
this.template.button.innerHTML = Icons.pause;
251+
}, 100);
252+
}
253+
254+
this.playedPromise = Promise.resolve(this.audio.play()).catch(() => {
256255
this.pause();
257256
});
258-
});
259257

260-
this.timer.enable('progress');
258+
this.timer.enable('progress');
261259

262-
if (this.options.mutex) {
263-
for (let i = 0; i < instances.length; i++) {
264-
if (this !== instances[i]) {
265-
instances[i].pause();
260+
if (this.options.mutex) {
261+
for (let i = 0; i < instances.length; i++) {
262+
if (this !== instances[i]) {
263+
instances[i].pause();
264+
}
266265
}
267266
}
268-
}
267+
});
269268
}
270269

271270
/**
272271
* Pause music
273272
*/
274273
pause () {
275-
if (!this.paused) {
276-
this.paused = true;
277-
278-
this.template.button.classList.remove('aplayer-pause');
279-
this.template.button.classList.add('aplayer-play');
280-
this.template.button.innerHTML = '';
281-
setTimeout(() => {
282-
this.template.button.innerHTML = Icons.play;
283-
}, 100);
284-
}
285-
286274
this.handlePlayPromise(() => {
275+
if (!this.paused) {
276+
this.paused = true;
277+
278+
this.template.button.classList.remove('aplayer-pause');
279+
this.template.button.classList.add('aplayer-play');
280+
this.template.button.innerHTML = '';
281+
setTimeout(() => {
282+
this.template.button.innerHTML = Icons.play;
283+
}, 100);
284+
}
285+
287286
this.audio.pause();
287+
288+
this.timer.disable('progress');
288289
});
289-
this.timer.disable('progress');
290290
}
291291

292292
switchVolumeIcon () {
@@ -420,7 +420,6 @@ class APlayer {
420420
}
421421

422422
this.options.music.splice(index, 1);
423-
this.audios.splice(index, 1);
424423

425424
list[index].remove();
426425
for (let i = index; i < list.length; i++) {
@@ -452,6 +451,8 @@ class APlayer {
452451
if (this.playedPromise) {
453452
this.playedPromise = this.playedPromise.then(() => {
454453
callback();
454+
}).catch((err) => {
455+
console.error(err);
455456
});
456457
}
457458
else {

0 commit comments

Comments
 (0)