Question

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

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

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

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

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

非常感谢。

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();

      }

Answer 1

您需要从播放按钮事件处理程序返回false，以防止页面滚动到顶部。

变化：

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

要：

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

Answer 2

这是因为您的链接中有anchor，例如href="#"。一个非常简单的修复方法是将return 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({ ... });

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

2 个答案: