javascript - tag - www w3schools com html5




تشغيل الصوت مع Javascript؟ (8)

أجري لعبة باستخدام HTML5 وجافا سكريبت.

كيف يمكنني تشغيل لعبة الصوت عبر Javascript؟


إذا كنت تريد تشغيل الصوت كلما فتحت الصفحة ، فقم بهذا.

<script>
  function playMusic(){
  music.play();
  }
  </script>
<html>
  <audio id="music" loop src="sounds/music.wav" autoplay> </audio>
  </html>

واستدعاء هذا playMusic () عندما تحتاج في رمز اللعبة.


إذا كنت لا تريد العبث بعناصر HTML:

var audio = new Audio('audio_file.mp3');
audio.play();

يستخدم هذا واجهة HTMLAudioElement ، التي تقوم بتشغيل الصوت بنفس طريقة عنصر <audio> .

إذا كنت بحاجة إلى مزيد من الوظائف ، فقد استخدمت مكتبة howler.js بسيطة ومفيدة.


الأمر سهل ، فقط احصل على عنصر audio واستدعاء طريقة play() :

document.getElementById('yourAudioTag').play();

تحقق من هذا المثال: http://www.storiesinflight.com/html5/audio.html

يكشف هذا الموقع عن بعض الأشياء الرائعة الأخرى التي يمكنك القيام بها مثل load() ، pause() ، وبعض الخصائص الأخرى لعنصر audio .


حل بسيط جدًا إذا كان لديك علامة HTML مثل:

<audio id="myAudio" src="some_audio.mp3"></audio>

ما عليك سوى استخدام جافا سكريبت لتشغيله ، مثل:

document.getElementById('myAudio').play();

من السهل مع مسج

// تعيين علامات الصوت بدون تحميل مسبق

<audio class="my_audio" controls preload="none">
    <source src="audio/my_song.mp3" type="audio/mpeg">
    <source src="audio/my_song.ogg" type="audio/ogg">
</audio>

// add jquery للتحميل

$(".my_audio").trigger('load');

/ / كتابة أساليب للعب والتوقف

function play_audio(task) {
      if(task == 'play'){
           $(".my_audio").trigger('play');
      }
      if(task == 'stop'){
           $(".my_audio").trigger('pause');
           $(".my_audio").prop("currentTime",0);
      }
 }

// تقرر كيفية التحكم في الصوت

<button onclick="play_audio('play')">PLAY</button>
<button onclick="play_audio('stop')">STOP</button>

تصحيح

لمعالجة سؤال @ stomy ، إليك كيفية استخدام هذا الأسلوب لتشغيل قائمة تشغيل :

عيّن أغنياتك في كائن:

playlist = {
    'song_1' : 'audio/splat.mp3',
    'song_2' : 'audio/saw.mp3',
    'song_3' : 'audio/marbles.mp3',
    'song_4' : 'audio/seagulls.mp3',
    'song_5' : 'audio/plane.mp3'
}

استخدم وظائف المشغل والتشغيل كما كان من قبل:

$(".my_audio").trigger('load');

function play_audio(task) {
      if(task == 'play'){
           $(".my_audio").trigger('play');
      }
      if(task == 'stop'){
           $(".my_audio").trigger('pause');
           $(".my_audio").prop("currentTime",0);
      }
 }

تحميل الأغنية الأولى ديناميكيًا:

keys = Object.keys(playlist);
$('.my_audio').append("<source id='sound_src' src=" + playlist[keys[0]] + " type='audio/mpeg'>");

إعادة تعيين مصدر الصوت إلى الأغنية التالية في قائمة التشغيل ، عند انتهاء الأغنية الحالية:

count = 0; 
$('.my_audio').on('ended', function() { 
   count++;  
   $("#sound_src").attr("src", playlist[keys[count]])[0];
   $(".my_audio").trigger('load');
   play_audio('play');
});

انظر here للحصول على مثال لهذا الرمز في العمل.


هذا سؤال قديم نوعًا ما ولكن أريد إضافة بعض المعلومات المفيدة. ذكر كاتب الموضوع أنه "making a game" . لذلك ، بالنسبة إلى كل شخص يحتاج إلى صوت لتطوير الألعاب ، هناك خيار أفضل من مجرد علامة <audio> أو HTMLAudioElement . أعتقد أنك يجب أن تفكر في استخدام واجهة برمجة تطبيقات Web Audio :

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


new Audio('./file.mp3').play()

var song = new Audio();
song.src = 'file.mp3';
song.play();




html5-audio