HTML5音乐播放器..docVIP

HTML5音乐播放器 初学HTML5，感觉audio标签有点兴趣。尝试着做一个播放器，练习过程中发 现，audio的ended事件触发有点小问题第一首播放结束确实只触发了一次ended事件，第二次播放接受触发两次，第三次播放结束触发了4次。导致 一直在列表的1、2两首轮播，完全不顾及第三首的感受。。 在几大论坛上发帖求助未果，于是自己一阵乱搞，加了个判断 if(self.media.currentTime == self.media.duration)如果不满足这个条件触发了ended事件也不去播放下一首。 function Audio(song, playType, dom){ /* * 播放器构造函数。 * dom:为audio元素，可以不传。 * song : 为歌曲列表，只支持数组形式，格式为[{}{}] * playType 为播放方式： 1 顺序播放 2 随机播放 3 单曲循环 4 全部循环 */ if(!dom) { this.media = document.createElement(audio); document.body.appendChild(this.media); }else { this.media = typeof dom == string ? document.getElementById(dom) : dom; } this.currentIndex = 0; this.songList = song; this.countTotal = this.songList.length; this.playType = playType || 1; this.MusicInfo = []; this.playing = false;}/* * 播放器启动主函数 */Audio.prototype.startPlay = function(){ this.media.src = this.songList[this.currentIndex].src; this._play();}/* * 播放器播放核心函数. */Audio.prototype._play = function(){ var self = this; this.media.play(); this.playing = true; this.mediaEvent(ended ,callback); function callback(){ //单曲循环无需单独处理,只需直接调用startPlay()函数。 if(self.media.currentTime == self.media.duration){ switch(self.playType){ case 1: if(self.currentIndex == self.countTotal-1){ return false; }else{ self.currentIndex++; } break; case 2: self.currentIndex = Math.floor(Math.random()*self.countTotal); break; case 4:  self.currentIndex++; console.log(self.currentIndex==,self.currentIndex); self.currentIndex = (self.currentIndex self.countTotal-1) ? 0 : self.currentIndex; break; } self.startPlay(); }