लोड होने पर प्रीलोडलोड/स्ट्रीमिंग से एचटीएमएल 5 ऑडियो को कैसे रोकें?

Question

मेरे पास एक एकल पृष्ठ वेबसाइट है जो HTML5 ऑडियो प्लेयर का संग्रह सूचीबद्ध करती है। समस्या साइट धीमी गति से बन गया है क्योंकि निम्न ब्राउज़रों सामग्री (एमपी 3 और ogg)

Internet Explorer 
Google Chrome 
Firefox 
Safari 
(probably Opera) 

मैं खिलाड़ियों को लागू करने के बुनियादी कोड का उपयोग predownloading शुरू है। क्या कोई तरीका है कि मैं ब्राउज़र फ़ाइलों को ऑडियो फ़ाइलों को पूर्व-लोड करने से रोक सकता हूं और जब वे खेलें क्लिक करते हैं तो केवल काम करते हैं?

<audio controls="controls" height="32" width="300" tabindex="0"> 
<source type="audio/mpeg" src="http://cdn.com/track.mp3"></source> 
<source type="audio/ogg" src="http://cdn.com/track.ogg"></source> 
</audio> 

Answer 1

<audio controls="controls" preload="none"> 
    <source src="song.ogg" type="audio/ogg" /> 
    <source src="song.mp3" type="audio/mpeg" /> 
    Your browser does not support the audio element. 
</audio> 

नोट - preload="none" - वीडियो एचटीएमएल 5 और ऑडियो एचटीएमएल 5 के साथ प्रयोग किया जा सकता है।

प्रीलोड लोड इंटरनेट एक्सप्लोरर और ओपेरा को छोड़कर सभी प्रमुख ब्राउज़रों में समर्थित है।

Answer 2

एमएसआईई अभी भी सभी वेब ट्रैफ़िक का लगभग 30% है, इसलिए preload="none" केवल एक भाग समाधान है। कुछ पन्नों जहां मैं इस समस्या थी में, मैं अपने पृष्ठ हेडर लिए एक छोटा सा स्क्रिप्ट जोड़ने:

<script type="text/javascript"> 
function addAudio(t) { 
    var l=t.innerHTML.length; 
    var audioName=t.parentElement.id; 
    if(t.children.length==0) { 
    t.innerHTML=t.innerHTML+'&nbsp; &nbsp; <audio controls="controls"><source src="'+ 
     audioName+'.ogg" type="audio/ogg" /><source src="'+ 
     audioName+'.mp3" type="audio/mp3" /> No audio tag support</audio>'; 
    } 
} 
</script> 

और फिर DHMTL का उपयोग गतिशील ऑडियो टैग को जोड़ने के लिए, उदाहरण के लिए:

<li id="2_Lesson_1_Hello"><span onclick="addAudio(this)">Γεια σας</span></li> 

क्या इस एक पाठ अवधि युक्त सूची आइटम को परिभाषित करना है। जब व्यक्ति स्पैन किए गए टेक्स्ट पर क्लिक ब्राउज़ करता है, तो जावास्क्रिप्ट <audio> टैग को सक्रिय करता है और जोड़ता है। आप वैकल्पिक रूप से onmouseover विशेषता का उपयोग कर सकते हैं ताकि ऑडियो टैग होवर पर जोड़ा जा सके।

यदि आप चाहें तो उत्पन्न कोड में preload विशेषता जोड़ें। यह एक आसान तरीका है, लेकिन यदि आप पहले से ही अपने वेबपृष्ठ पर jQuery का उपयोग कर रहे हैं, तो मुझे लगता है कि यह सुरुचिपूर्ण विकल्प प्रदान करता है।