javascript - weschool - www w3schools com html5




مؤثرات صوتية في JavaScript/HTML5 (11)

كائنات Audio HTML5

لست بحاجة إلى أن تهتم بعناصر <audio> . يتيح لك HTML 5 الوصول إلى الكائنات Audio مباشرةً:

var snd = new Audio("file.wav"); // buffers automatically when created
snd.play();

لا يوجد دعم لخلط في الإصدار الحالي من المواصفات.

لتشغيل نفس الصوت عدة مرات ، قم بإنشاء مثيلات متعددة من كائن Audio . يمكنك أيضًا تعيين snd.currentTime=0 على الكائن بعد انتهاء التشغيل.

نظرًا لأن مُنشئ JS لا يدعم العناصر <source> الاحتياطية ، يجب عليك استخدام

(new Audio()).canPlayType("audio/ogg; codecs=vorbis")

لاختبار ما إذا كان المستعرض يدعم Ogg Vorbis.

إذا كنت تكتب لعبة أو تطبيق موسيقى (أكثر من مجرد لاعب) ، فستحتاج إلى استخدام واجهة برمجة تطبيقات Web Audio الأكثر تقدمًا ، والتي تدعمها معظم المتصفحات الآن .

أستخدم HTML5 لألعاب البرامج ؛ العقبة التي واجهتها الآن هي كيفية تشغيل المؤثرات الصوتية.

المتطلبات المحددة قليلة العدد:

  • لعب وخلط الأصوات المتعددة ،
  • تشغيل العينة نفسها عدة مرات ، ومن المحتمل أن تتداخل عمليات التشغيل ،
  • تشغيل مقاطع من عينة في أي نقطة ،
  • يفضل تشغيل ملفات WAV التي تحتوي على (PCM) ذات جودة منخفضة ، لكن يمكنني تحويلها بالطبع.

كان تقديمي الأول هو استخدام عنصر <audio> HTML5 وتحديد كل المؤثرات الصوتية في صفحتي. يقوم Firefox بتشغيل ملفات WAV فقط ، ولكن الاتصال بـ #play عدة مرات لا يتم تشغيل العينة عدة مرات. من خلال فهمي لمواصفات HTML5 ، يتتبع العنصر <audio> أيضًا حالة التشغيل ، وهذا ما يفسر السبب.

كان فكري الفوري هو استنساخ العناصر الصوتية ، لذلك قمت بإنشاء مكتبة جافا سكريبت الصغيرة التالية للقيام بذلك بالنسبة لي (يعتمد على jQuery):

var Snd = {
  init: function() {
    $("audio").each(function() {
      var src = this.getAttribute('src');
      if (src.substring(0, 4) !== "snd/") { return; }
      // Cut out the basename (strip directory and extension)
      var name = src.substring(4, src.length - 4);
      // Create the helper function, which clones the audio object and plays it
      var Constructor = function() {};
      Constructor.prototype = this;
      Snd[name] = function() {
        var clone = new Constructor();
        clone.play();
        // Return the cloned element, so the caller can interrupt the sound effect
        return clone;
      };
    });
  }
};

الآن أستطيع أن أفعل Snd.boom(); من وحدة تحكم Firebug ولعب snd/boom.wav ، ولكن ما زلت لا أستطيع تشغيل نفس العينة عدة مرات. يبدو أن العنصر <audio> هو أكثر من ميزة تدفق بدلاً من شيء لتشغيل مؤثرات صوتية به.

هل هناك طريقة ذكية لتحقيق ذلك أنني مفقود ، ويفضل استخدام HTML5 و JavaScript فقط؟

يجب أن أذكر أيضًا أن بيئة الاختبار الخاصة بي هي Firefox 3.5 على Ubuntu 9.10. أما المتصفحات الأخرى التي حاولت استخدامها - Opera ، و Midori ، و Chromium ، و Epiphany ، فقد نتجت نتائج مختلفة. بعض لا تلعب أي شيء ، وبعض الاستثناءات رمي.


WebAudio API by W3C

اعتبارًا من تموز 2012 ، أصبحت واجهة برمجة تطبيقات WebAudio معتمدة حاليًا في Chrome ، وتم دعمها جزئيًا على الأقل في فايرفوكس ، ومن المقرر إضافتها إلى IOS اعتبارًا من الإصدار 6.

على الرغم من أنها قوية بما يكفي لاستخدامها بشكل مبرمج في المهام الأساسية ، إلا أن عنصر الصوت لم يقصد أبدًا توفير دعم صوتي كامل للألعاب ، إلخ. لقد تم تصميمه للسماح بدمج جزء واحد من الوسائط في صفحة ، على غرار img العلامة. هناك الكثير من المشكلات في محاولة استخدام علامة الصوت للألعاب:

  • تعتبر قسائم التوقيت شائعة مع عناصر الصوت
  • أنت بحاجة إلى عنصر صوت لكل مثيل للصوت
  • أحداث التحميل ليست موثوقة تمامًا ، حتى الآن
  • لا توجد عناصر تحكم في مستوى الصوت ، ولا يتلاشى ، ولا توجد فلاتر / تأثيرات

لقد استخدمت مقالة Getting Started With WebAudio للبدء مع WebAudio API. دراسة حالة FieldRunners WebAudio هي أيضا قراءة جيدة.


ألقِ نظرة على موقع jai (-> mirror ) (واجهة javascript audio). من النظر إلى مصدرها ، يبدو أنها تتصل بـ play() بشكل متكرر ، ويذكرون أن مكتبتهم قد تكون مناسبة للاستخدام في الألعاب القائمة على HTML5.

يمكنك إطلاق عدة أحداث صوتية في وقت واحد ، والتي يمكن استخدامها لإنشاء ألعاب جافا سكريبت ، أو وجود صوت يتحدث على بعض الموسيقى في الخلفية


أوصي باستخدام برنامج SoundJS ، مكتبة أساعد في تطويرها. يسمح لك بكتابة قاعدة شيفرة واحدة تعمل في كل مكان ، مع صوت SoundJS على الويب ، أو صوت HTML ، أو صوت فلاش حسب الحاجة.

سيسمح لك بالقيام بكل ما تريد:

  • لعب وخلط الأصوات المتعددة ،
  • يمكنك تشغيل العينة نفسها عدة مرات ، ومن المحتمل أن تتداخل مع عمليات التشغيل
  • تشغيل المقاطعة لعينة في أي نقطة
  • تشغيل ملفات WAV تحتوي على (حسب دعم المتصفح)

امل ان يساعد.


اليك فكرة. قم بتحميل كل الصوت الخاص بك لفئة معينة من الأصوات في عنصر صوت فردي فردي حيث تكون بيانات src هي كل عيناتك في ملف صوتي مجاور (ربما تريد بعض الصمت بين بحيث يمكنك التقاط وتقطيع العينات من خلال مهلة أقل خطر النزيف إلى العينة التالية). ثم ، تسعى إلى العينة واللعب عند الحاجة.

إذا كنت بحاجة إلى أكثر من واحد للعب ، فيمكنك إنشاء عنصر صوت إضافي مع نفس src بحيث يتم تخزينه مؤقتًا. الآن ، لديك بالفعل "مسارات" متعددة. يمكنك استخدام مجموعات من المسارات باستخدام نظام تخصيص الموارد المفضل لديك مثل Round Robin إلخ.

يمكنك أيضًا تحديد خيارات أخرى مثل أصوات الصفوف في مسار يتم تشغيله عندما يصبح هذا المورد متاحًا أو يقطع عينة قيد التشغيل حاليًا.


جريت في هذا أثناء برمجة مولد بطاقة musicbox. بدأت مع مكتبات مختلفة ولكن في كل مرة كان هناك خلل بطريقة أو بأخرى. كان التأخير في تنفيذ الصوت العادي سيئًا ، ولم يتم تشغيل أي لعبة متعددة ... في النهاية انتهى الأمر باستخدام مكتبة lowlag + soundmanager:

http://lowlag.alienbill.com/ و http://www.schillmania.com/projects/soundmanager2/

يمكنك التحقق من التنفيذ هنا: http://musicbox.grit.it/

أنا ولدت ملفات WAV + ogg للعب متعدد المتصفحات. هذا مشغل musicbox يعمل على الاستجابة على ipad ، iphone ، Nexus ، mac ، pc ، ... يعمل بالنسبة لي.


قد تحتاج أيضًا إلى استخدام هذا للكشف عن صوت HTML 5 في بعض الحالات:

http://diveintohtml5.ep.io/everything.html

HTML 5 JS كشف وظيفة

function supportsAudio()
{
    var a = document.createElement('audio'); 
    return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
}

لا يمكن تشغيل اللقطات المتعددة باستخدام عنصر <audio> واحد. تحتاج إلى استخدام عناصر متعددة لهذا الغرض.


وأنا أعلم أن هذا هو الاختراق الكلي ولكن أعتقد أنني يجب أن أضيف هذه المكتبة مفتوحة المصدر الصوت مكتبة أضع على جيثب منذ فترة ...

https://github.com/run-time/jThump

بعد النقر على الرابط أدناه ، اكتب على مفاتيح صف المنزل لتشغيل ruff blues (اكتب أيضًا مفاتيح متعددة في الوقت نفسه ، إلخ.)

عينة باستخدام مكتبة jThump >> http://davealger.com/apps/jthump/

وهي تعمل بشكل أساسي عن طريق جعل عناصر <iframe> غير مرئية تقوم بتحميل الصفحة التي تقوم بتشغيل الصوت عند القراءة ().

هذا بالتأكيد ليس مثالياً ولكن يمكنك إجراء 1+ لهذا الحل بناءً على الإبداع وحده (وحقيقة أنه مفتوح المصدر ويعمل في أي متصفح قمت بتجربته) آمل أن يعطي هذا شخصًا آخر يبحث عن بعض الأفكار على الأقل.

:)


يبدو أن ما تريده هو أصوات متعددة القنوات. لنفترض أن لديك 4 قنوات (مثل ألعاب 16-بت قديمة بالفعل) ، لم يكن لدي مستدير للعب مع ميزة الصوت HTML5 حتى الآن ، ولكن لا تحتاج فقط إلى 4 عناصر <audio> ، والدورة المستخدمة لتشغيل التأثير الصوتي التالي؟ هل جربت ذلك؟ ما يحدث؟ إذا كان يعمل: لتشغيل المزيد من الأصوات في وقت واحد ، ما عليك سوى إضافة المزيد من العناصر <audio>.

لقد فعلت هذا من قبل دون عنصر HTML5 <audio> ، باستخدام كائن فلاش صغير من http://flash-mp3-player.net/ - كتبت مسابقة موسيقية ( http://webdeavour.appspot.com/ ) و استخدمها لتشغيل مقاطع من الموسيقى عندما نقر المستخدم على زر السؤال. في البداية كان لديّ لاعب واحد لكل سؤال ، وكان من الممكن لعبها فوق بعضها البعض ، لذا قمت بتغييرها بحيث لم يكن هناك سوى لاعب واحد ، والذي أشرت إليه في مقاطع موسيقية مختلفة.






html5