音頻進度條HTML5與互動

-1

嘿，我需要創造HTML 5中的一個簡單的播放器，我創建了德控制，播放，暫停，音頻進度條HTML5與互動

，但我需要互爲作用

一個進度條，這個例子是一個interarion酒吧，但我需要點擊這個舉動音樂時間

$('.clickable').bind('click', function (ev) { 
       var $div = $(ev.target); 
       var $display = $div.find('.display'); 

       var offset = $div.offset(); 
       var x = ev.clientX - offset.left; 

       $('.progress').width(x); 
      }); 

      $("#pause").click(function() { 
       audioElement.pause(); 
      });

來源

2015-06-30 Panda Bolado

這裏沒有人會給你寫整個玩家......但是如果你把播放的音頻和其他需要的東西放到你的例子中，我們會很樂意提供幫助。 – Shomz

你已經做了大部分的工作。您現在需要做的是更改音頻播放器的currentTime值。這是幾秒鐘內的價值。

既然你已經有了你的點擊的X位置，你可以將它除以你的進度條的寬度來得到應該播放的歌曲的百分比。

您擁有音頻元素的duration屬性，該屬性返回當前正在播放的音頻文件的長度，以秒爲單位。

var duration = player.duration; 
var ratio = X/progressBar.width(); 
var newCurrentTime = ratio * duration. 
player.currentTime = newCurrentTime;

這只是一個簡單的例子，用其適當的值替換變量名稱。

假設您的進度條正好是100px寬，並且您計算的點擊次數爲50px，則該比率將爲50/100，因此0.5。乘以音軌的總持續時間，你將得到新的持續時間來設置。

來源

2015-06-30 23:42:35 Drown

音頻進度條HTML5與互動

回答

相關問題