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




video html youtube (8)

لقد لعبت مع 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 خاصية الحلقة الآن في جميع المتصفحات الرئيسية.


لإضافة بعض النصائح الإضافية التي تجمع بين اقتراحاتkingjeffrey وMSMS: يمكنك استخدام loop حيثما تكون متاحة والعودة إلى معالج الأحداث الخاص بالملك kingjeffrey عندما لا يكون ذلك متاحًا. هناك سبب وجيه وراء رغبتك في استخدام loop وعدم كتابة معالج الأحداث الخاص بك: كما تمت مناقشته في تقرير خلل موزيلا ، في حين أن loop لا تعمل حاليًا بشكل سلس (بدون فجوة) في أي متصفح أعرفه ، فمن الممكن بالتأكيد من المرجح أن تصبح قياسية في المستقبل. لن يكون معالج الأحداث الخاص بك سهلاً على الإطلاق في أي متصفح (نظرًا لأنه يضخ عبر حلقة الحدث JavaScript). لذلك ، من الأفضل استخدام الحل حيثما أمكن بدلاً من كتابة الحدث الخاص بك. كما أشار CMS في تعليق على إجابة Anurag ، يمكنك الكشف عن دعم loop عن طريق الاستعلام عن متغير loop - إذا كان مدعومًا فإنه سيكون منطقيًا (خطأ) ، وإلا فإنه لن يتم تحديده ، حيث إنه حاليًا في Firefox.

وضع هذه معا:

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();

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

استخدام مضمّن: 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 سيكون طول صوتك.


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

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

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

myAudio.play();

شئ مثل هذا.


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

مجرد مجموعة حلقة = صحيح في eventlistener canplaythrough.

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


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

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

تعمل الشفرة الخاصة بي على Chrome (5.0.375) ، و Safari (5.0). لا حلقة على فايرفوكس (3.6).

انظر على سبيل المثال.

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

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

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

ويبدو مثل هذا





html5-audio