Javascript ile ses mi çalıyorsunuz?

HTML5 ve Javascript ile oyun yapıyorum.

Javascript ile nasıl oyun sesi çalabilirim?

HTML öğeleriyle uğraşmak istemiyorsanız:

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

function play() {
  var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');
  audio.play();
}

<button onclick="play()">Play Audio</button>

Bu, HTMLAudioElementsesi <audio>öğeyle aynı şekilde çalan arayüzü kullanır .

Daha fazla işlevselliğe ihtiyacınız varsa, howler.js kütüphanesini kullandım ve basit ve kullanışlı buldum.

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.1/howler.min.js"></script>
<script>
    var sound = new Howl({
      src: ['https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3'],
      volume: 0.5,
      onend: function () {
        alert('Finished!');
      }
    });
    sound.play()
</script>

Kolay, sadece öğenizi alın audiove play()yöntemi çağırın :

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

Bu örneği inceleyin: http://www.storiesinflight.com/html5/audio.html

Bu site aşağıdaki gibi yapabileceğiniz diğer serin bazı şeyleri ortaya çıkarır load(), pause()ve birkaç diğer özellikleri audioelemanı.

http://www.schillmania.com/projects/soundmanager2/

SoundManager 2, IE 6+ dahil herhangi bir modern tarayıcıda sesin çalınmasına izin veren kullanımı kolay bir API sağlar. Tarayıcı HTML5'i desteklemiyorsa, flaştan yardım alır. Kesinlikle HTML5 istiyor ve flaş yok, bunun için bir ayar var,preferFlash=false

İPad, iPhone (iOS4) ve diğer HTML5 özellikli cihazlarda + tarayıcılarda% 100 Flash içermeyen sesi destekler

Kullanımı şu kadar basit:

<script src="soundmanager2.js"></script>
<script>
    // where to find flash SWFs, if needed...
    soundManager.url = '/path/to/swf-files/';

    soundManager.onready(function() {
        soundManager.createSound({
            id: 'mySound',
            url: '/path/to/an.mp3'
        });

        // ...and play it
        soundManager.play('mySound');
    });
</script>

İşte bununla ilgili bir demo: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

Bu oldukça eski bir soru ama bazı yararlı bilgiler eklemek istiyorum. Starter konusu olduğunu belirtti "making a game". Bu nedenle, oyun geliştirme için sese ihtiyaç duyan herkes için sadece bir <audio>etiket veya a'dan daha iyi bir seçim var HTMLAudioElement. Web Ses API'sının kullanımını göz önünde bulundurmanız gerektiğini düşünüyorum :

Web'deki ses artık bir eklenti gerektirmezken, ses etiketi sofistike oyunlar ve etkileşimli uygulamalar uygulamak için önemli sınırlamalar getirir. Web Audio API, web uygulamalarındaki sesi işlemek ve sentezlemek için üst düzey bir JavaScript API'sıdır. Bu API'nın amacı, modern oyun ses motorlarında bulunan yetenekleri ve modern masaüstü ses üretim uygulamalarında bulunan bazı karıştırma, işleme ve filtreleme görevlerini eklemektir.

Jquery ile kolay

// önyükleme olmadan ses etiketlerini ayarlama

<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>

// yüklemek için jquery ekle

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

// oynatma ve durdurma yöntemleri yazma

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

// sesi nasıl kontrol edeceğinize karar verin

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

DÜZENLE

@ Stomy'nin sorusunu ele almak için, bu yaklaşımı bir oynatma listesi çalmak için nasıl kullanacağınız aşağıda açıklanmıştır :

Şarkılarınızı bir nesneye yerleştirin:

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'
}

Tetikleme ve oynatma işlevlerini daha önce olduğu gibi kullanın:

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

İlk şarkıyı dinamik olarak yükleyin:

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

Geçerli şarkı sona erdiğinde ses kaynağını çalma listesindeki bir sonraki şarkıya sıfırlayın:

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

Uygulamada bu kodun bir örneği için buraya bakın .

Gizli bir ses ekleyin ve çalın.

function playSound(url){
  var audio = document.createElement('audio');
  audio.style.display = "none";
  audio.src = url;
  audio.autoplay = true;
  audio.onended = function(){
    audio.remove() //Remove when played.
  };
  document.body.appendChild(audio);
}

Aşağıdaki hatayı alıyorsanız:

Yakalanmayan (vaat edilen) DOMException: play () başarısız oldu, çünkü kullanıcı önce belgeyle etkileşimde bulunmadı.

Bu, kullanıcının önce web sitesiyle etkileşime girmesi gerektiği anlamına gelir (hata mesajının belirttiği gibi). Bu durumda click, kullanıcının web sitenizle etkileşime girebilmesi için veya başka bir olay dinleyicisini kullanmanız gerekir .

Sesi otomatik olarak yüklemek istiyorsanız ve kullanıcının önce belgeyle etkileşim kurmasını istemiyorsanız kullanabilirsiniz setTimeout.

setTimeout(() => {
  document.getElementById('mySound').play();
}, 500)

<audio id="mySound" src="sound.mp3"></audio>

Ses 0,5 saniye sonra başlayacaktır.

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

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

Aşağıdaki gibi bir HTML etiketiniz varsa oldukça basit bir çözüm:

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

Oynamak için JavaScript kullanın, şöyle:

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

Ses sözü nesnesiyle ilgili bazı sorunlar yaşadım dönüşleri ve bu küçük nesne kullanarak sonunda sesler ile kullanıcı etkileşimi ile ilgili bazı sorunlar vardı,

Oynatma seslerini, kullanıcının kullandığı etkileşim etkinliğine en yakın şekilde uygulamayı öneririm.

var soundPlayer = {
  audio: null,
  muted: false,
  playing: false,
  _ppromis: null,
  puse: function () {
      this.audio.pause();
  },
  play: function (file) {
      if (this.muted) {
          return false;
      }
      if (!this.audio && this.playing === false) {
          this.audio = new Audio(file);
          this._ppromis = this.audio.play();
          this.playing = true;

          if (this._ppromis !== undefined) {
              this._ppromis.then(function () {
                  soundPlayer.playing = false;
              });
          }

      } else if (!this.playing) {

          this.playing = true;
          this.audio.src = file;
          this._ppromis = soundPlayer.audio.play();
          this._ppromis.then(function () {
              soundPlayer.playing = false;
          });
      }
  }
};

Ve aşağıdaki gibi uygulayın:

<button onclick="soundPlayer.play('https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3');">Play</button>

Bu yöntemi ses çalmak için kullandım ...

var audioElement;
if(!audioElement) {
  audioElement = document.createElement('audio');
  audioElement.innerHTML = '<source src="' + '/audio/sound.mp3'+ '" type="audio/mpeg" />'
}
audioElement.play();

Bir kullanıcının sesin izin verilebilmesi için bir web sayfasıyla etkileşime girmesi gereken güvenlik gereksinimleriyle, bu site de dahil olmak üzere birçok makaleyi okumaya dayanarak bunu nasıl yaparım?

1. HTML'nizde gerekli ses dosyalarını tanımlayın
2. Onclick ile oyuna başla düğmesi
3. Düğme tıklandığında, TÜM ses dosyaları çubuğunu başında çalmak istediğiniz dosyayı çalın ve duraklatın

Tüm ses dosyaları aynı OnClick'te "oynatıldığı" için, artık bunları oyunda istediğiniz zaman kısıtlama olmadan çalabilirsiniz

En iyi uyumluluk için wav dosyalarını kullanmadığını unutmayın, MS bunları desteklemez

Tüm cihazları kapsayan mp3 ve ogg kullanın

Misal:

<audio id="welcome">
    <source src="URL/welcome.ogg" type="audio/ogg">
    <source src="URL/welcome.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

oyundaki tüm sesler için gerektiği kadar tekrarlayın

Sonra:

document.getElementById("welcome").play();
document.getElementById("welcome").pause();

Oyun başladığında duymak istediğiniz sesi duraklatmak dışında gerektiği kadar tekrarlayın

sayfa açıldığında sesinizi çalmak istiyorsanız bunu yapın.

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

ve oyun kodunuzda ihtiyacınız olduğunda bu playMusic () öğesini çağırın.

Sesleri çalmak için Web Audio API'sını kullanabilirsiniz. Orada nasıl bazı ses kütüphaneleri howler.js, soundjs vb vardır. Eski tarayıcılar hakkında endişelenmeyin, o zaman http://musquitojs.com/ de kontrol edebilirsiniz . Sesler oluşturmak ve çalmak için basit bir API sağlar.

Örneğin, bir ses çalmak için yapmanız gereken tek şey.

import $buzz from 'musquito';

const buzz = $buzz('gunfire.mp3');

buzz.play();

Kütüphane ayrıca Ses Spritelarını da destekler.

Bu bazı JS i ile çalışan bir bebek AI projesi üzerinde geldi. Umarım bu size yardımcı olabilir.

<!DOCTYPE html>
<html>
<head>
    <title>
        js prompt AI
    </title>
    <style>
        #button {
            border: 1px solid black;
            border-radius: 10px;
            font-size: 22px;
            height:65px;
            width:100px;
            text-align: center;
            line-height: 65px;
        }
    </style>
</head>
<body>

    <audio id="myAudio" src="./how_are_you.m4a"></audio>
    <p>To Interact with the AI please click the button</p>
    <div id=button>click</div>

    <script>

       var button = document.getElementById("button");
       function playBack() {
           button.addEventListener("click", function (){
            var talk = prompt("If you wish for the AI to respond type hi");
            var myAudio = document.getElementById("myAudio");

            if(talk === "hi") {
                    myAudio.play();
            }
           }) ;



       }
       playBack();
   </script>
</body>

</html>

Sadece şunu kullanın:

<video controls="" autoplay="" name="media"><source src="Sound URL Here" type="audio/mpeg" /></video>

Veya, daha basit hale getirmek için:

<video controls="" autoplay="" name="media">

<source src="Sound URL Here" type="audio/mpeg" />

</video>

Örneklem:

<video controls="" autoplay="" name="media">
<source src="https://interactive-examples.mdn.mozilla.net/media/examples/t-rex-roar.mp3" type="audio/mpeg">
</video>

Bu, Chrome 73 dışındaki tarayıcılarda çalışıyorsa HİÇBİR Fikir YOK !!

Ses çalmayla ilgili bazı sorunlar yaşadım, özellikle Chrome, kullanıcının önce belgeyle etkileşim kurması gerektiğini güncellediğinden.

Ancak, bulduğum hemen hemen tüm çözümlerde JS kodunun, sesi oynatmak için kullanıcı olaylarını almak için dinleyicileri (örn. Düğme tıklamaları) aktif olarak ayarlaması gerektiğidir.

Benim durumumda, oyuncu ile etkileşime girer girmez oyunumun BGM oynamasını istedim, bu yüzden web sayfasının etkileşimde olup olmadığını kontrol etmeye devam eden basit bir dinleyici yaptım.

const stopAttempt = setInterval(() => {
    const audio = new Audio('your_audio_url_or_file_name.mp3');
    const playPromise = audio.play();
    if (playPromise) {
      playPromise.then(() => {
        clearInterval(stopAttempt)
      }).catch(e=>{
        console.log('' + e);
      })
    }
}, 100 )

İşte hatayı gördüğünüzde 2020 yılı için bir çözüm:

[Hata] İşlenmemiş Promise Reddi: NotSupportedError: İşlem desteklenmiyor. (anonim işlev) rejectPromise oynatma (anonim işlev) (testaudio.html: 96) gönderme (jquery-3.4.1.min.js: 2: 42577)

<div onclick="new Audio('/assets/test.mp3').play()">aaa</div>

Kaygan olmayın ve ooh bu eski bir okul oclick, sadece sayfadan aşağıya jQuery veya harici JavaScript dosyama taşıyacağım. Hayır! Bunun bir olması gerekir onclick.