मैं एक HTML5 ऑडियो तत्व के लिए लोडिंग बार कैसे बना सकता हूं?

Question

मैं एक HTML5 ऑडियो तत्व के लिए लोडिंग बार (प्रतिशत लोड/buffered दिखा रहा है) बनाने की कोशिश कर रहा हूं।

वीडियो टैग का उपयोग कर की गणना के लिए निम्नलिखित संभव है के लिए:

video.buffered.end(0)/video.duration 

लेकिन मैं इस ऑडियो टैग के साथ काम करने के लिए नहीं मिल सकता है। यह सिर्फ एक फिक्स वैल्यू देता है।

कोई विचार?

धन्यवाद!

Answer 1

यह निर्धारित मूल्य क्या है? क्या आप इस मुद्दे को प्रदर्शित करने के लिए एक सरल jsfiddle बना सकते हैं?

यह html5 doctor tutorial हाल ही में लिखा गया था और HTML5 ऑडियो के वर्तमान स्थिति के बारे में कुछ अच्छी जानकारी है। पेज नीचे निम्नलिखित टिप आधा रास्ता लगता है कि यह आपके मामले में उचित हो सकता है:

आप कुछ समय तक कर सकते थे, जबकि परिवर्तन मीडिया डाउनलोड के रूप में durationchange घटना की जांच की आवश्यकता हो सकती है। इसके अलावा, मेटाडेटा उपलब्ध है या नहीं, इस पर निर्भर करता है कि ऑडियो पर अपनी अवधि की जांच करने तक प्रतीक्षा करने की आवश्यकता हो सकती है। संक्षेप में, अवधि परिवर्तन ईवेंट, पर नजर रखें और जब तक अवधि अभी तक ज्ञात न हो तो NaN मानों के लिए देखें!

Answer 2

आप एक HTML5 ऑडियो तत्व की प्रगति हो और एक <progress> तत्व करने के लिए इसे लागू करने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं:

var myAudio = document.getElementById('#myAudio'); 
var myProgressBar = document.getElementById('#myProgressBar'); 

myAudio.addEventListener('timeupdate', onLoadProgress); 

function onLoadProgress() { 
    var progress = parseInt(((myAudio.currentTime/myAudio.duration) * 100), 10); 
    myProgressBar.value = progress; 
} 

Answer 3

buffered पर end विधि कॉलिंग की जाँच के बिना अविश्वसनीय है। यह संभव है कि आप विधि को कुछ भी नहीं बुलाएंगे।

document.querySelector('span').innerHTML = document.querySelector('audio').buffered.length;

<audio src="http://myst729.qiniudn.com/within-temptation_pale.mp3" controls autoplay></audio> 
 
<p>Buffered Length: <span></span></p>

देखें: इस बेला की जाँच करें? पहली शुरुआत में, buffered लंबाई 0 है - कुछ भी लोड नहीं हुआ है। आपको यह सुनिश्चित करने की ज़रूरत है कि start या end विधि को कॉल करने से पहले buffered लंबाई 0 नहीं है।

---

हर बार जब आप buffered पढ़ते हैं, तो यह वास्तव में तय किया जाता है। तो, एक दृश्यमान "लोडिंग" प्रभाव प्राप्त करने के लिए, आपको इसे बार-बार पढ़ना होगा।

यहाँ मैं भरी हुई और खेला प्रतिशत अपडेट करने के लिए 50 मिलीसेकंड का प्रयास करें:

var audio = document.querySelector('audio'); 
 
var percentages = document.querySelectorAll('span'); 
 

 
function loop() { 
 
    var buffered = audio.buffered; 
 
    var loaded; 
 
    var played; 
 

 
    if (buffered.length) { 
 
    loaded = 100 * buffered.end(0)/audio.duration; 
 
    played = 100 * audio.currentTime/audio.duration; 
 
    percentages[0].innerHTML = loaded.toFixed(2); 
 
    percentages[1].innerHTML = played.toFixed(2); 
 
    } 
 

 
    setTimeout(loop, 50); 
 
} 
 

 
loop();

<audio src="http://myst729.qiniudn.com/within-temptation_pale.mp3" controls autoplay></audio> 
 
<p>Loaded: <span></span>%</p> 
 
<p>Played: <span></span>%</p>

नोट: एमपी 3 फ़ाइल अपनी जगह में सुलभ नहीं हो सकता। यदि ऐसा है, तो बस अपने पक्ष में एक और स्रोत आज़माएं। अन्यथा आप एक बहुत अच्छी मादा मुखर सुनेंगे, और प्रतिशत लगातार परिवर्तन देखेंगे, अंततः 100% समाप्त होता है।

Answer 4

मुझे पूरा यकीन नहीं है कि मैं आपकी जांच को कम करता हूं।लेकिन यहाँ एक तरह से मैं गणना करने के लिए कितना ऑडियो बफ़र है प्रयोग किया जाता है

var audio = document.querySelector('audio'); 
 
var set; 
 
window.onload = function(){set=setInterval(buffer,1000);}; 
 
    function buffer() { 
 
    if(audio.buffered.length>0){ 
 
    var percent = (audio.buffered.end(0)/audio.duration) * 100; 
 
     document.querySelector('p').innerHTML = percent+'%'; 
 
    if(percent === 100){ 
 
      clearInterval(set); 
 
     } 
 
     } 
 
}

<audio src="http://customhtml5video.000webhostapp.com/audio.mp3" controls></audio> 
 
<p></p>