自定義進度條<audio>和<progress>HTML5元素

我在介紹如何使用標記和簡單的Javascript爲音頻播放器創建自定義搜索欄時感到不解。自定義進度條<audio>和<progress>HTML5元素

目前代碼：

<script> 
    function play() { 
    document.getElementById('player').play(); 
    } 

    function pause() { 
    document.getElementById('player').pause(); 
    } 
</script> 


<audio src="sample.mp3" id="player"></audio> 
<button onClick="javascript:play()" >Play</button> 
<button onClick="javascript:pause()" >Pause</button> 
<progress id="seekbar"></progress>

有沒有可能，這樣，當我播放一首歌曲進度顯示進度條鏈接？

來源

2012-09-07 Zach Boyd McTague

HTML5之類的東西'的onClick = 「JavaScript的：播放（）」'是一個殘酷的配對。 – MaxArt

是的，可以使用音頻標籤的timeupdate事件。每次播放位置更新時，您都會收到此事件。然後，您可以使用音頻元素的currentTime和duration屬性更新進度欄。

您可以在此fiddle

來源

2012-09-07 08:58:49 jbalsas

是否有可能將此代碼作爲常規JavaScript而不是JQuery？ –

當然！ [這裏]（http://jsfiddle.net/jbalsas/DCE6N/7/）它是！ ;） – jbalsas

它現在每250ms檢查一次新的時間。是否有可能更快地做到這一點，所以酒吧更順利？ – Luc

首先，不要使用progress元素，這是一個很糟糕的元素（現在）和造型，這是一個巨大的痛苦...以及它很無聊（看看我做的一個小項目，look at it（和它是正確的webkit/moz））。

無論如何，您應該閱讀MDN上的文檔，它非常簡單並且有很多示例。你要找的是currentTime屬性，在這裏一個小片段：

var audio = document.querySelector('#player') 
audio.currentTime = 60 // will go to the 60th second

所以，你需要的是使用的交叉相乘（div是你作爲一個進度條使用元素）：當我點擊在div |我想知道的時間
----------------------------------------
總長度爲div |我的視頻/音頻的總時間（audio.seekable.end()）

來源

2012-09-07 08:42:56 Calvein

看到工作的例子。如果你想順利進度條，嘗試somethink像

HTML：

<div class="hp_slide"> 
    <div class="hp_range"></div> 
</div>

CSS：

.hp_slide{ 
    width:100%; 
    background:white; 
    height:25px; 
} 
.hp_range{ 
    width:0; 
    background:black; 
    height:25px; 
}

JS：

var player = document.getElementById('player');  
player.addEventListener("timeupdate", function() { 
    var currentTime = player.currentTime; 
    var duration = player.duration; 
    $('.hp_range').stop(true,true).animate({'width':(currentTime +.25)/duration*100+'%'},250,'linear'); 
});

相當粗糙，但工程

來源

2015-11-19 11:30:18

自定義進度條<audio>和<progress>HTML5元素

回答

相關問題