html player.js

var Player = {
        playList: [{ title: "天空之城", singer: "久石让", URL: ["http://upload20.music.qzone.soso.com/30479511.mp3","http://landodesign.net/sky.mp3"]},
                        {title: "金鱼的眼泪", singer: "纪佳松", URL: ["http://wma.9ku.com/2011/3/26/1.mp3"]}],//播放列表数据
        currentSong: {},//当前播放歌曲
        audio: document.getElementById("audio"),//绑定页面相应的Dom，下面几个都是
        list: document.getElementById("playlist"),
        search: document.getElementById("btn"),
        keyword: document.getElementById("search"),
        state: document.getElementById("state"),
        init: function () {//初始化函数
            this.renderList();//渲染播放列表
            var self=this;
            this.search.onclick = function () { Player.add(self.keyword.value); }//绑定点击搜索歌曲的按钮
        },
        add: function (keyword) {//添加歌曲函数，参数是关键字
            var self = this;
            this.search.innerHTML = "我挖啊挖...";
            var xhr = new XMLHttpRequest();//初始化XHR对象，下面是发送数据和一些准备工作
            xhr.open("GET", "info2.ashx?keyword=" + window.escape(keyword), true);
            xhr.onreadystatechange = function () { if (xhr.readyState == 4) callback(xhr.responseText); }
            xhr.send(null);
            function callback(data) {//回调函数
                if (data) {//如果有数据传回来
                    var obj = eval(data);//解析为对象并且push进播放列表中
                    self.playList.push(obj);
                    self.renderList();//渲染列表
                    if(self.audio.src==""||self.audio.ended)self.play(obj);//如果是之前没有播放或者已经结束了，就直接播放搜索出来的那首歌
                }
                else {//如果搜不到或者出错都会返回空字符串，然后会有这个提示
                    alert("木有这首歌啵~");
                }
                self.search.innerHTML = "再来一首吧";
            }
        },
        play: function (song) {
            var self = this;
            this.audio.src = song.URL[0];//把第一个URL赋给audio
            this.audio.addEventListener("error", function () {//如果出错了并且有两个URL，就尝试第二个；下面是都各种事件的绑定
                if (self.audio.src == song.URL[0] && song.URL[1]) self.audio.src = song.URL[1];
                else self.changeState("链接失败！");
            });
            this.audio.addEventListener("waiting", function () {
                self.changeState("等待缓冲...");
            });
            this.audio.addEventListener("playing", function () {
                self.changeState("正在播放 :" + song.title + " - " + song.singer, "正在播放 :" + song.title);
            });
            this.audio.addEventListener("pause", function () {
                self.changeState("暂停播放 :" + song.title + " - " + song.singer, "正在播放 :" + song.title);
            });
            this.audio.addEventListener("ended", function () {//如果播放完了，就随机播放下一首，不知道是不是算法有问题，感觉很不随机
                self.play(self.playList[Math.ceil(self.playList.length * Math.random()) - 1]);
            });
            this.audio.play();//播放
            this.currentSong = song;
            this.renderList();
        },
        renderList: function () {//渲染列表函数
            var self = this;
            this.list.innerHTML = "";//先清空Dom
            for (var i = 0; i < this.playList.length; i++) {//一个个的节点加上去
                var a = document.createElement("a");
                if (this.playList[i] == self.currentSong) a.setAttribute("class", "playing");
                a.innerHTML = this.playList[i].title + " - " + this.playList[i].singer //+ (this.playList[i] == self.currentSong ? "<span>  [正在播放...]</span>" : "");
                a.href = "javascript:void(0)";
                a.onclick = (function (song) {//这里要创建闭包
                    return function () {
                        self.play(song);
                    }
                })(this.playList[i]);
                this.list.appendChild(a);
            }
        },
        changeState: function (info, title) {//改变状态函数
            this.state.innerHTML = info;//这个是控制栏上面的哪里
            document.title = title || info;//这个是网页标题，如果没有第二参数则使用前一个参数
        }
    }
    window.onload = Player.init();

<br type="_moz">