Javascript 如何在不刷新网页的情况下播放歌曲？

我只想在用户按下“播放”按钮时播放歌曲

无需等待加载所有21首歌曲

当我按下“播放”按钮时，页面会像刷新一样跳起，这是不正常的

我可以做些什么来改进我的代码

请尝试播放中的歌曲并查看问题

非常感谢

var Music = {


        init:function(){

                        song = new Audio();
                        //speaKer = document.getElementById("imgSpeaker");
                        this.volume = 0.08;
                        this.isMute = false;
                        canPlayMP3 = (typeof song.canPlayType === "function" && song.canPlayType("audio/mpeg") !== "");
                        song.src = canPlayMP3 ? "http://rafih.co.il/wp-content/uploads/2013/07/1.mp3" : "http://rafih.co.il/wp-content/uploads/2013/07/1.ogg";
                        song.preload = 'auto';
        },

    /*  start:function(){
                        song.src = canPlayMP3 ? "http://rafih.co.il/wp-content/uploads/2013/07/1.mp3" : "http://rafih.co.il/wp-content/uploads/2013/07/1.ogg";
                        song.volume = 0.08;
                        song.autoplay = true;
                        song.load();
        },*/

         play: function () {
                        song.volume = 0.08;
                        song.autoplay = true;
                        song.load();
                       // Music.speaker();

                    },

        stop: function () {
                        if (!song.ended) {
                            song.pause();
                        }   
                    },

        next: function () {
                        if (curr < count) {
                            curr++;
                        }else curr = 1;
                        song.src = canPlayMP3 ? "http://rafih.co.il/wp-content/uploads/2013/07/" + curr + ".mp3" : "http://rafih.co.il/wp-content/uploads/2013/07/" + curr + ".ogg";


        },          


      };
      function load() {
        Music.init();

      }

var音乐={
init:function（）{
歌曲=新音频（）；
//speaKer=document.getElementById（“imgSpeaker”）；
该体积=0.08；
this.isMute=false；
canplaym3=（typeof song.canPlayType==“函数”和&song.canPlayType（“音频/mpeg”）！==”）；
song.src=canplaym3？”http://rafih.co.il/wp-content/uploads/2013/07/1.mp3" : "http://rafih.co.il/wp-content/uploads/2013/07/1.ogg";
song.preload='auto'；
},
/*开始：函数（）{
song.src=canplaym3？”http://rafih.co.il/wp-content/uploads/2013/07/1.mp3" : "http://rafih.co.il/wp-content/uploads/2013/07/1.ogg";
宋。卷=0.08；
song.autoplay=true；
song.load（）；
},*/
播放：函数（）{
宋。卷=0.08；
song.autoplay=true；
song.load（）；
//音乐。扬声器（）；
},
停止：函数（）{
如果（！song.end）{
歌曲。暂停（）；
}   
},
下一步：函数（）{
如果（当前<计数）{
curr++；
}else curr=1；
song.src=canplaym3？”http://rafih.co.il/wp-content/uploads/2013/07/“+curr+”.mp3:”http://rafih.co.il/wp-content/uploads/2013/07/“+curr+”.ogg”；
},          
};
函数加载（）{
Music.init（）；
}

您需要从play buttons事件处理程序返回false，以防止页面滚动到顶部

更改：

<div id="play" onclick='Music.play()'>

致：

---

这是因为链接中有

锚定，例如
href=“#”
。一个非常简单的修复方法是添加
并返回false插入到内联处理程序属性中，例如
onclick=“Music.play（）；return false；”
，但这不是一种好方法，被认为是一种不好的做法

相反，您可以通过编程方式添加处理程序，这也将使代码更加模块化和可测试：

var Music = {
    init: function (options) {
        var playBtn = this.playBtn = document.querySelector(options.playBtn);

        playBtn.addEventListener('click', this._onPlayBtnClick.bind(this));
        //...

        return this;
    },
    _onPlayBtnClick: function (e) {
        e.preventDefault(); //prevents the browser's default behaviour
        this.play();
    },
    //...
};

然后你可以做一些类似的事情：

function load() {
    var musicController = Object.create(Music).init({
        playBtn: '#play',
        //...
    });
}

您也可以将其用作单件，如：

Music.init({ ... });

您可能想考虑使用HTML5音频的JPoPE。它有一些很好的内置功能。我不确定是否可以在文件播放结束后附加事件以播放下一个文件。jPlayer允许您在文件停止播放时附加事件。您也可以从
play（）
方法内部简单地
返回false
。这样您就不必修改HTML。
Music.init({ ... });