HTML5 ऑडियो लूपिंग

Question

मैं हाल ही में एचटीएमएल 5 ऑडियो के साथ खेल रहा हूं, और हालांकि मैं इसे साउंड प्ले करने के लिए प्राप्त कर सकता हूं। कोई फर्क नहीं पड़ता कि मैं क्या (गुण, घटना संचालकों आदि की स्थापना) की कोशिश कर रहा हूं, मैं इसे लूप में नहीं ला सकता।

यहां मैं मूल कोड का उपयोग कर रहा हूं:

//myAudio is declared at a global scope, so it doesn't get garbage collected.
myAudio = new Audio('someSound.ogg');
myAudio.loop = true;
myAudio.play();

मैं क्रोम (6.0.466.0 देव) और फ़ायरफ़ॉक्स (4 बीटा 1) का उपयोग करके परीक्षण कर रहा हूं, दोनों ही लूपिंग के लिए मेरे अनुरोधों को अनदेखा करने में खुश हैं। कोई विचार?

अद्यतन : लूप संपत्ति अब सभी प्रमुख ब्राउज़रों में समर्थित है।

Comments

क्रोम के बारे में निश्चित नहीं है, लेकिन फ़ायरफ़ॉक्स लूपिंग का समर्थन नहीं करता है।

— लुइसबुलल

इसे समाप्त करने के बाद ही इसे शुरू करें: myAudio.addEventListener ("समाप्त", फ़ंक्शन (e) {myAudio.play ();}; false);

— मत्तबस्ता

@ मुझे आश्चर्य है कि यह काम क्यों नहीं करता है? इस कोड और स्वीकृत उत्तर के बीच एकमात्र अंतर यह है कि स्वीकृत उत्तर में, यह currentTimeकॉल करने से पहले 0 पर सेट होता है play। क्या यह आवश्यक है?

— मागुका

@ ब्रेंडन हां, किंगजेफ्रे की दूसरी टिप्पणी को उनके स्वयं के उत्तर पर देखें। आपको सेट करने की आवश्यकता है currentTime।

— मागुका

यह ठीक काम करता है (कम से कम आज)

— 20 पर dvlden

Answer 1

जबकि loopनिर्दिष्ट किया गया है, इसमें लागू नहीं किया गया हैकिसी भी ब्राउज़र से मैं अवगत हूँ फ़ायरफ़ॉक्स [इसे इंगित करने के लिए अनुराग का धन्यवाद] । यहां लूपिंग का एक वैकल्पिक तरीका है जो HTML5 सक्षम ब्राउज़रों में काम करना चाहिए:

var myAudio = new Audio('someSound.ogg'); 
myAudio.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
}, false);
myAudio.play();

Comments

हम्म ... दिलचस्प। इस विधि के साथ मुझे पहले से ज्यादा कुछ नसीब नहीं था, लेकिन मैं वर्तमान समय निर्धारित नहीं कर रहा था। जब मैं यह कोशिश करता हूं, हालांकि मुझे मिलता है: "अनकवर्ड एरर: INDEX_SIZE_ERR: DOM एक्सेप्शन 1" लाइन पर "this.currentTime = 0"

— Toji

@Toji यहाँ INDEX_SIZR_ERR त्रुटि के लिए प्रलेखन है । इसका मतलब है कि गीत की शुरुआत उस सीमा के बाहर है जिसे ब्राउज़र खोज सकता है। यह कभी-कभी होता है अगर ब्राउज़र को लगता है कि यह स्ट्रीमिंग मीडिया है, या यदि सर्वर में कुछ क्षमताओं का अभाव है (मैं यह भूल जाता हूं कि यह विशिष्ट क्षमता क्या है, लेकिन मैं इसे ट्रैक करने की कोशिश करूंगा)। आप this.startTimeजल्द से जल्द उपलब्ध समय पर लौटने के लिए भी उपयोग कर सकते हैं ।

— किंगजेफ्रे

@Toji कारण .currentTimeकी जरूरत है कि कैसे एक गीत के अंत में कल्पना संभालती है। ब्राउज़रों को केवल गीत को रोकना चाहिए। इसलिए गाने के अंत में रीइन्टेटिंग प्ले प्ले होता है। प्लेहेड को रीसेट किया जाना चाहिए।

— किंगजेफ्रे

@Toji यहाँ एक और विचार है अगर आप .currentTimeकाम करने में असमर्थ हैं । कॉलबैक फ़ंक्शन के अंदर, आप बस myAudioउसी फ़ाइल के साथ पुनः लोड कर सकते हैं और इसे फिर से खेल सकते हैं। Redeclaring यह भी गीत की शुरुआत के लिए playhead रीसेट करना चाहिए।

— किंगजेफ्रे

इसे इस.स्टार्टटाइम पर सेट करना मुझे वही त्रुटि देता है, हालाँकि अब मुझे आश्चर्य हो रहा है कि क्या यह एक सर्वर समस्या है। मैं एक स्थानीय django सर्वर (जो django की सबसे मजबूत विशेषता नहीं है) से स्थिर फ़ाइलों की सेवा कर रहा हूं। जोड़ी इस तथ्य के साथ कि अनुराग काम करता है और मुझे लगता है कि यह शायद सिर्फ मैं ही हूं। मैं इसके साथ थोड़ा और खिलौना लूंगा और आपको परिणाम बताऊंगा।

— टॉजी

Answer 2

@Kingjeffrey और @CMS के सुझावों के संयोजन के लिए कुछ और सलाह जोड़ने के लिए: आप इसका उपयोग कर सकते हैं loopजहां यह उपलब्ध है और जब यह नहीं है तो Kingjeffrey के ईवेंट हैंडलर पर वापस गिर सकते हैं। एक अच्छा कारण है कि आप loopअपने स्वयं के ईवेंट हैंडलर का उपयोग और लेखन क्यों नहीं करना चाहते हैं : जैसा कि मोज़िला बग रिपोर्ट में चर्चा की गई है , जबकि loopवर्तमान में मैं किसी भी ब्राउज़र में मूल रूप से (बिना अंतराल के) लूप नहीं करता हूं, जो मुझे पता है, यह निश्चित रूप से संभव है और संभव है भविष्य में मानक बनें। आपका अपना ईवेंट हैंडलर कभी भी किसी भी ब्राउज़र में सीमलेस नहीं होगा (क्योंकि उसे जावास्क्रिप्ट ईवेंट लूप के माध्यम से पंप करना होगा)। इसलिए, loopअपनी स्वयं की घटना लिखने के बजाय जहां संभव हो उसका उपयोग करना सबसे अच्छा है । जैसा कि अनुराग के जवाब पर एक टिप्पणी में सीएमएस ने कहा,looploop चर - अगर यह समर्थित है तो यह बूलियन (गलत) होगा, अन्यथा यह अपरिभाषित होगा, जैसा कि वर्तमान में फ़ायरफ़ॉक्स में है।

इन्हें एक साथ रखना:

myAudio = new Audio('someSound.ogg'); 
if (typeof myAudio.loop == 'boolean')
{
    myAudio.loop = true;
}
else
{
    myAudio.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);
}
myAudio.play();

Comments

धन्यवाद। यह पूरी तरह से ओपेरा, फ़ायरफ़ॉक्स, क्रोम के लिए काम करता है ... तो हम सफारी के लिए अधिक ध्वनियों (एमपी 3) को कैसे जोड़ सकते हैं .... ??? अधिक चर जोड़ने से संभवतः Chrome के लिए डुप्लिकेट

@pixelass मुझे पूरी तरह से यकीन नहीं है कि इसे कोड में कैसे किया जाए। HTML में, आप एक दूसरे के अंदर <ऑडियो> टैग्स को घोंसला देंगे, और ब्राउज़र सबसे बाहरी वाले से मेल खाएगा। मुझे नहीं पता कि क्या आप प्रोग्राम ऑडियो ऑब्जेक्ट में उस घोंसले का शिकार कर सकते हैं। लेकिन आप निश्चित रूप से इसे स्वयं प्रोग्राम कर सकते हैं: Audio.canPlayType विधि देखें।

— मागुका

मैं html विधि से अवगत हूँ। मैं Audio.canPlayType विधि के साथ आसपास कोशिश कर सकता हूं। अभी मैं 2 चर का उपयोग कर रहा हूं, इसलिए क्रोम में 2 फाइलें चलाई जाती हैं। यह वास्तव में बहुत ज्यादा मायने नहीं रखता है क्योंकि यह केवल कुछ ओशनवॉव लूप है जो मैंने बनाया है। ... लेकिन बस 2 स्रोतों को जोड़ने से बहुत अच्छा होगा,। अगर आप परवाह करते हैं तो pixelass.com ।

Answer 3

आपका कोड मेरे लिए Chrome (5.0.375), और Safari (5.0) पर काम करता है। फ़ायरफ़ॉक्स (3.6) पर लूप नहीं करता है।

उदाहरण देखें।

var song = new Audio("file");
song.loop = true;
document.body.appendChild(song);​

Comments

+1 बहुत अच्छा। मैं अनजान loopथा वेबकिट में लागू किया गया था।

— किंगजेफ्रे

+1, आप यह भी पता लगा सकते हैं कि क्या loopइसका समर्थन किया जाता है, उदाहरण के लिए:typeof new Audio().loop == 'boolean';

— क्रिश्चियन सी। सल्वाडू

@ सीएमएस के उपयोग ==और उपयोग से बचें ===, यह शुरुआती और प्रदर्शन के लिए बेहतर ऑपरेटर है।

— क्लेडर

यह फ़ायरफ़ॉक्स 80 के साथ संगत है?

— मुस्तफ़िज़ रहमान

Answer 4

var audio = new Audio("http://rho.nu/pub/Game%20Of%20Thrones%20-%20Main%20Theme%20-%20Soundtrack.mp3");

audio.addEventListener('canplaythrough', function() {
    this.currentTime = this.duration - 10;
    this.loop = true;
    this.play();
});

कैनप्लेथ्रू इवेंटलिस्ट में बस लूप सेट करें।

http://jsbin.com/ciforiwano/1/edit?html,css,js,output

Answer 5

सबसे सरल तरीका है:

bgSound = new Audio("sounds/background.mp3");
bgSound.loop = true;
bgSound.play();

Answer 6

इवेंट श्रोता के लिए jQuery का उपयोग करने का प्रयास करें, यह तब फ़ायरफ़ॉक्स में काम करेगा।

myAudio = new Audio('someSound.ogg');

$(myAudio).bind('ended', function()  {
    myAudio.currentTime = 0;
    myAudio.play();
});

myAudio.play();

ऐसा कुछ।

Answer 7

मैंने इसे इस तरह किया,

<audio controls="controls" loop="loop">
<source src="someSound.ogg" type="audio/ogg" />
</audio>

और यह इस तरह दिखता है

Answer 8

यह काम करता है और ऊपर बताए गए तरीकों को टॉगल करना बहुत आसान है:

इनलाइन का उपयोग करें: onended="if($(this).attr('data-loop')){ this.currentTime = 0; this.play(); }"

लूपिंग को $(audio_element).attr('data-loop','1'); चालू करके बंद कर दें$(audio_element).removeAttr('data-loop');

Answer 9

यदि आप ध्वनि की सटीक लंबाई जानते हैं, तो आप एक सेट इन्टरवल की कोशिश कर सकते हैं। आप सेट कर सकते हैंइंटरवाल हर x सेकंड में ध्वनि बजाता है। X आपकी ध्वनि की लंबाई होगी।

Comments

यह प्रश्न का उत्तर प्रदान नहीं करता है। किसी लेखक से स्पष्टीकरण मांगने या उसका अनुरोध करने के लिए, उनकी पोस्ट के नीचे एक टिप्पणी छोड़ दें - आप हमेशा अपने स्वयं के पोस्ट पर टिप्पणी कर सकते हैं, और एक बार आपके पास पर्याप्त प्रतिष्ठा होने पर आप किसी भी पोस्ट पर टिप्पणी कर पाएंगे ।

— एलेक्स चार

@AlexChar मैं असहमत। यह प्रश्न का उत्तर देने का कम से कम प्रयास है। यह कुछ विस्तार से दिखा सकता है कि वास्तव में कोड क्या दिख सकता है, और यह संभवतः समस्या को हल करने का सबसे अच्छा तरीका नहीं है, लेकिन यह "उत्तर नहीं" है।

— एंथनी ग्रिस्ट

ऐसा करने से परेशानी का अनुभव होता है।

— क्लेडर