2013-03-12 42 views
2

我試圖添加音樂到一個虛擬旅遊應用程序我正在寫JS和jQuery,到目前爲止我的代碼,如下所示,在Chrome,FF,IE9,和歌劇。但在Safari 5.1.7,這是你可以得到一臺Windows計算機,它只是不工作......通過我的問題的研究最新的,我知道,Safari瀏覽器不會自動播放音樂,它必須啓動手動,但是當我點擊播放按鈕時,沒有任何反應。而且,順便說一句,在Safari中的代碼檢查顯示,我的音樂標籤是沒有用的音樂來源,所以我不認爲這有什麼用DOM。對我的問題有任何想法?<audio>元素在Safari中根本不工作

HTML

<div id="musicBtns"> 
    <p>Music:</p> 
    <p id="musicPlayBtn">Play</p> 
    <p>/</p> 
    <p id="musicPauseBtn">Pause</p> 
</div> 

我的音樂對象JS

var Music = 
    { 
     musicBtns: $('#musicBtns'), 
     playBtn: $('#musicPlayBtn'), 
     pauseBtn: $('#musicPauseBtn'), 
     isPlaying: false, 

     init: function() 
     { 
      if(!music.includeMusic) // If the client didn't want any music in the tour app, remove the music btns from the DOM 
      { 
       this.musicBtns.remove(); 
      } 
      else // Else, setup the audio element 
      { 
       var parent = this; 
       var audio = $('<audio loop="true">'); 

       if(music.autoplay) 
       { 
        audio.attr('autoplay', 'autoplay'); 
        this.isPlaying = true; 
        this.togglePlayPause(); 
       } 

       // Add a source elements and appends them to the audio element 
       this.addSource(audio, music.ogg); // 'music.ogg' is a reference to the path in a JSON file 
       this.addSource(audio, music.mp3); 
       this.musicBtns.append(audio); 

       // Add event listeners for the play/pause btns 
       this.playBtn.click(function() 
       { 
        audio.trigger('play'); 
        parent.isPlaying = true; 
        parent.togglePlayPause(); 
       }); 

       this.pauseBtn.click(function() 
       { 
        audio.trigger('pause'); 
        parent.isPlaying = false; 
        parent.togglePlayPause(); 
       }); 
      } 
     }, 
     addSource: function(el, path) 
     { 
      el.append($('<source>').attr('src', path)); 
     }, 
     // Add or remove classes depending on the state of play/pause 
     togglePlayPause: function() 
     { 
      if(this.isPlaying) 
      { 
       this.playBtn.addClass('underline'); 
       this.pauseBtn.removeClass('underline'); 
      } 
      else 
      { 
       this.playBtn.removeClass('underline'); 
       this.pauseBtn.addClass('underline'); 
      } 
     } 
    } 

編輯:難道這是在Safari中的錯誤?

回答

1

所以,問題竟然是用QuickTime。我想我必須在它刪除了我的機器的一段時間回來,因爲我不認爲我需要它。我在重新安裝了QuickTime,Safari瀏覽器使用沒有問題的音頻標籤播放音樂。自動播放甚至可以起作用。

有趣的是,原生HTML5音頻/視頻支持的冠軍,不支持HTML5音頻/視頻沒有插件...

0

在Safari上HTML5視頻我有這個問題,我不得不「負荷」(我認爲它,要麼啓動緩衝或加載整個事情)之前,我將其設置爲播放。這似乎確實讓一些webkit瀏覽器能夠正常工作。因此,像:

var a = new Audio("file.mp3"); 
a.load(); 
a.play(); 

值得一試