使用jPlayer創建自定義音頻播放器

Question

正在關注this文章，我正在嘗試使用jPlayer創建一個簡單的自定義音頻播放器。

這是HTML代碼

<div id="audio-player"> 
    <div id="track-info"> 

    </div> 
    <div id="player-buttons"> 
     <div id="player"> 
      <div id="playButton" class="button"> 
       <img id="play-button" src="images/bage-playing.png" /> 
      </div> 
      <div id="pauseButton" class="button"> 
       <img id="pause-button" src="images/bage-paused.png" /> 
      </div> 
      <div id="stopButton" class="button"> 
       <img id="stop-button" src="images/bage-busy.png" /> 
      </div> 
     </div> 
    </div> 
</div><!-- end of audio-player --> 

而且它看起來像這樣。

我把下面的腳本在一個單獨的JS文件並將其添加在HTML頁面的頭部與jPlayer的JS文件一起。

我的問題是當我運行頁面時，按鈕消失！我完全無能爲力。

如果之前有人遇到過類似的情況，或者您有任何建議讓這項工作有效，那麼我就會全神貫注。

謝謝。

Answer 1

這不是可以說對某些正在發生的事情在這裏沒有一個例子URL，但一對夫婦的事情要牢記：

當使用JPlayer，一旦你有「綁定」使用「cssSelectors控件'API的屬性，它將使用Javascript DOM方法操作這些控件，並將內聯CSS應用於DOM項目。

首先，值得一提的是JPlayer會在適當的時候隱藏Play和Pause按鈕。例如。當曲目正在播放時，它會隱藏播放按鈕，當曲目暫停時，它會隱藏播放按鈕 - 這可能是您的一些問題的原因。

更可能的問題是，您有按鈕的div容器，並指定它們，然後jPlayer將清除其內容。如果您從您的按鈕div中的圖像更改，並在div上使用背景和指定的大小，我懷疑您的代碼將工作。

你的代碼如下所示：

<div id="audio-player"> 
    <div id="track-info"> 

    </div> 
    <div id="player-buttons"> 
     <div id="player"> 
      <div id="playButton" class="button"> 
       <img id="play-button" src="images/bage-playing.png" /> 
      </div> 
      <div id="pauseButton" class="button"> 
       <img id="pause-button" src="images/bage-paused.png" /> 
      </div> 
      <div id="stopButton" class="button"> 
       <img id="stop-button" src="images/bage-busy.png" /> 
      </div> 
     </div> 
    </div> 
</div> 

我將其更改爲：

<div id="audio-player"> 
    <div id="track-info"> 

    </div> 
    <div id="player-buttons"> 
     <div id="player"> 
      <div id="playButton" class="button"> 
      </div> 
      <div id="pauseButton" class="button"> 
      </div> 
      <div id="stopButton" class="button"> 
      </div> 
     </div> 
    </div> 
</div> 

然後添加一些CSS這樣恢復的圖像：

#playButton { 
    background: transparent url('images/bage-playing.png') no-repeat; 
    height: 20px; /* Correct this size ;-) */ 
    width: 20px; /* Also correct this size ;-) */ 
} 

然後對每個按鈕做相同的操作，我期望你的代碼能夠工作。如果不是這樣，請發佈一個網址以顯示您正在進行的操作，然後我會更好地觀察一下。

歐文

附錄：

現在你已經張貼你的代碼，我可以看到兩個問題，希望能使其工作，當你解決這些問題：

首先，你在JavaScript中選擇元素而不是ID。當你有「cssSelector」對象，你正在使用的發言權字符串：

cssSelector: { 
     play: 'playButton', 
     pause: 'pauseButton', 
     stop: 'stopButton' 
    }, 

當他們應該說：

cssSelector: { 
    play: '#playButton', 
    pause: '#pauseButton', 
    stop: '#stopButton' 
}, 

你的版本將選擇按名稱，而不是ID，例如元素不是。我猜這是因爲你習慣於使用document.getElementById或者mooTools。

除此之外，JPlayer設置中的'ready'調用缺少一個函數。它看起來像這樣：

ready: jQuery(this).jPlayer("setMedia", { 
       mp3: 'http://www.karolodesign.com/media/music/bass-walker.mp3' 
      }); 

，應該是這樣的：

ready: function() { // This bit! 
      jQuery(this).jPlayer("setMedia", { 
       mp3: 'http://www.karolodesign.com/media/music/bass-walker.mp3' 
      }); 
     } 

這是我的錯，因爲我的網站上原來的例子其實有錯！我會糾正這個問題。

修復這兩個問題，它應該沒問題。 JQuery拋出一個錯誤，但我認爲這只是因爲缺少一個函數。讓我知道如果它不起作用，我會再看一次。

歐文