替換所有與jQuery和HTML5音頻

我有一個頁面，加載一個動態數字（但數量標記爲數據庫中的許多人）的「投票面板」與圖像和blurb和正在被投票的藝術家的音頻剪輯爲喜愛。我將一些jQuery混合在一起以「激活」一個播放按鈕，當點擊該按鈕時，將啓動正確的剪輯AND，並用停止按鈕替代src.當點擊停止按鈕時，剪輯停止並播放按鈕返回。當另一個播放按鈕被點擊時，我也設法讓播放片段停止，所以一次只播放一個片段。替換所有與jQuery和HTML5音頻

然而，我似乎無法弄清楚的是如何將停止按鈕更改回正在播放的剪輯的播放按鈕，並被不同的播放按鈕中斷。

該網站是作爲一個測試，但設置與週一未經發現的藝術家生活，所以我必須弄清楚。你可以在http://dev.edrtrust.com/play/index.php/ppm/artist_faceoff看到我的困境。

這裏是我的jQuery代碼：

$("img.btnPlay").live('click', function() { 
    var thisPID = $(this).attr('name'); 
    this.src = this.src.replace("<?= base_url(); ?>assets/images/playThis.png", 
     "<?= base_url(); ?>assets/images/stopThis.png"); 
    $(this).removeClass("btnPlay").addClass("btnStop"); 
    $.ajax({ 
     type: "POST", 
     url: "<?php echo site_url('ppm/getVoteClip'); ?>", 
     data: { 
      id: thisPID 
     }, 
     success: function (msg) { 
      $("#clip").empty().html(msg); 
      var plyr0 = document.getElementById('faceoffAudio0'); 
      plyr0.play(); 
     } // end success 
    }); // end ajax 
}); // end play button

和

$("img.btnStop").live('click', function() { 
    var plyr0 = document.getElementById('faceoffAudio0'); 
    plyr0.pause(); 
    this.src = this.src.replace("<?= base_url(); ?>assets/images/stopThis.png", 
     "<?= base_url(); ?>assets/images/playThis.png"); 
    $(this).removeClass("btnStop").addClass("btnPlay"); 
}); // end stop button

來源

2011-10-07 jgravois

你可以縮進你的代碼嗎？ – RvdK

這是，但當我試圖提交我的問題時，一個小組告訴我，我不得不縮進所有代碼4空格的行。我會嘗試再次編輯。 – jgravois

我用http://jsbeautifier.org/格式化代碼。突出顯示，然後按CTRL + K。 –

如果你只需要一個按鈕，一次說「停」，那麼你可以只檢查是否與任何按鈕.btnStop類，並將其更改回播放按鈕。

$("img.btnPlay").live('click', function() { 

    // update buttons on other players 
    $(".btnStop").each(function(index, element){ 
     element.src = element.src.replace("<?= base_url(); ?>assets/images/stopThis.png", 
     "<?= base_url(); ?>assets/images/playThis.png"); 
     $(element).removeClass("btnStop").addClass("btnPlay"); 
    }); 
    // end update buttons on other players 

    var thisPID = $(this).attr('name'); 
    this.src = this.src.replace("<?= base_url(); ?>assets/images/playThis.png", 
     "<?= base_url(); ?>assets/images/stopThis.png"); 
    $(this).removeClass("btnPlay").addClass("btnStop"); 

    $.ajax({ 
     type: "POST", 
     url: "<?php echo site_url('ppm/getVoteClip'); ?>", 
     data: { 
      id: thisPID 
     }, 
     success: function (msg) { 
      $("#clip").empty().html(msg); 
      var plyr0 = document.getElementById('faceoffAudio0'); 
      plyr0.play(); 
     } // end success 
    }); // end ajax 
}); // end play button

來源

2011-10-07 13:47:08 swatkins

我不得不更新答案，因爲我添加的附加代碼需要在更改點擊按鈕之前執行 - 否則，您將撤銷當前的按鈕更改。 – swatkins

替換所有與jQuery和HTML5音頻

回答

相關問題