0

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

无需等待加载所有 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();

      }
4

2 回答 2

0

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

改变：

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

至：

<div id="play" onclick='Music.play(); return false;'>
于 2013-10-14T18:20:29.923 回答
0

那是因为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({ ... });
于 2013-10-14T18:39:42.920 回答