javascript - تحميل - HTML5 الصوت looping




video html youtube (6)

لقد لعبت مع HTML5 الصوت في الآونة الأخيرة ، وعلى الرغم من أنني أستطيع الحصول عليه لتشغيل الصوت فقط من أي وقت مضى سوف يلعب مرة واحدة. بغض النظر عن ما أحاول (تعيين خصائص ، معالجات الأحداث ، إلخ) لا يبدو لي أن الحصول على حلقة.

إليك الرمز الأساسي الذي أستخدمه:

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

أجرِ اختبارًا باستخدام Chrome (6.0.466.0 dev) وفايرفوكس (4 بيتا 1) ، وكلاهما يبدو سعيدًا بتجاهل طلبات التكرار. أيه أفكار؟

UPDATE : تم supported خاصية الحلقة الآن في جميع المتصفحات الرئيسية.


أبسط طريقة هي:

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

أنا فعلت هذا بهذه الطريقة ،

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

ويبدو مثل هذا


حاول استخدام jQuery لمستمع الحدث ، ثم يعمل في Firefox.

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

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

myAudio.play();

شئ مثل هذا.


في حين يتم تحديد loop ، لا يتم تنفيذها في أي متصفح أعرفه فايرفوكس [شكرا Anurag للإشارة إلى هذا] . إليك طريقة بديلة لحلقات يجب أن تعمل في المتصفحات القادرة على HTML5:

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

يعمل هذا ويسهل كثيرًا تبديل الطرق المذكورة أعلاه:

استخدام مضمّن: onended="if($(this).attr('data-loop')){ this.currentTime = 0; this.play(); }"

تشغيل الحلقات بواسطة $(audio_element).attr('data-loop','1'); إيقاف تشغيل looping بواسطة $(audio_element).removeAttr('data-loop');


يمكنك تجربة setInterval ، إذا كنت تعرف الطول الدقيق للصوت. يمكن أن يكون لديك setInterval تشغيل الصوت كل ثانية x. X سيكون طول صوتك.





html5-audio