如何在不刷新網頁的情況下播放歌曲？

沒有等待加載所有的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(); 

     }

來源

2013-10-14 user2879862

你可能要考慮使用jPlayer的html5音頻。它有一些很好的內置功能。我不確定當文件播放完畢播放下一個文件時是否可以附加事件。 jPlayer將允許你在文件停止播放的時候附加一個事件 –

您需要從播放按鈕事件處理程序返回false，以防止頁面滾動到頂部。

變化：

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

要：

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

來源

2013-10-14 18:20:29 levi

非常感謝簡單而正確的 – user2879862

你也可以在'play（）'方法中簡單'返回false'。這樣你就不必修改HTML。 – idbehold

這是因爲在你的鏈接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-14 18:39:42 plalx

如何在不刷新網頁的情況下播放歌曲？

回答

相關問題