<audio> और <progress> एचटीएमएल 5 तत्वों

Question

के लिए कस्टम प्रगति पट्टी मैं टैग और सरल जावास्क्रिप्ट का उपयोग कर ऑडियो प्लेयर के लिए एक कस्टम खोजबार बनाने के तरीके पर काम कर रहा हूं।

वर्तमान कोड:

<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> 

यह इतना है कि जब मैं एक गाना प्रगति दिखाया गया है खेलने प्रगति बार लिंक करना संभव होगा?

Answer 1

हां, ऑडियो टैग के timeupdate ईवेंट का उपयोग करना संभव है। प्लेबैक की स्थिति अद्यतन होने पर आपको हर बार यह घटना मिलती है। फिर, आप currentTime और duration ऑडियो तत्व के गुणों का उपयोग करके अपनी प्रगति पट्टी को अपडेट कर सकते हैं।

आप इस fiddle

Answer 2

सबसे पहले, progress तत्व का उपयोग न करें, यह एक शर्मीली तत्व है (अभी के लिए) और स्टाइलिंग में यह एक बड़ा दर्द है ... अच्छा यह उबाऊ है (मैंने बनाई गई एक छोटी परियोजना को देखें, look at it (और यह सिर्फ वेबकिट/मोज़ है))।

वैसे भी, आपको MDN पर दस्तावेज़ पढ़ना चाहिए, यह बहुत आसान है और कई उदाहरणों के साथ। क्या आप देख रहे हैं currentTime विशेषता है, यहाँ एक छोटा स्निपेट है:

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

तो आप क्या जरूरत पार गुणा (div तत्व आप एक प्रगति बार के रूप में उपयोग होता है) का उपयोग करने के लिए है: मैं कहाँ क्लिक किया div पर | जिस समय मैं जानना चाहता हूं
----------------------------------------
div की कुल लंबाई | मेरे वीडियो/ऑडियो का कुल समय (audio.seekable.end())

Answer 3

में एक काम उदाहरण देख सकते हैं आप चिकनी प्रगति बार चाहते हैं, कि

HTML की तरह somethink कोशिश:

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

सीएसएस:

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

जेएस:

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'); 
}); 

सुंदर किसी न किसी तरह है, लेकिन जैसे `onClick = काम करता है