Memutar audio dengan Javascript?

Saya membuat game dengan HTML5 dan Javascript.

Bagaimana saya bisa memainkan audio game melalui Javascript?

Jika Anda tidak ingin dipusingkan dengan elemen HTML:

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>

Ini menggunakan HTMLAudioElementantarmuka, yang memutar audio dengan cara yang sama seperti <audio>elemen .

Jika Anda membutuhkan lebih banyak fungsi, saya menggunakan perpustakaan howler.js dan merasa sederhana dan bermanfaat.

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

Sangat mudah, dapatkan audioelemen Anda dan panggil play()metode:

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

Lihatlah contoh ini: http://www.storiesinflight.com/html5/audio.html

Situs ini mengungkapkan beberapa hal menarik lainnya yang dapat Anda lakukan seperti load(), pause(), dan beberapa properti lain dari audioelemen.

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

SoundManager 2 menyediakan API yang mudah digunakan yang memungkinkan suara dimainkan di browser modern apa pun, termasuk IE 6+. Jika browser tidak mendukung HTML5, maka itu mendapat bantuan dari flash. Jika Anda ingin HTML5 ketat dan tidak ada flash, ada pengaturan untuk itu,preferFlash=false

Ini mendukung 100% audio bebas Flash di iPad, iPhone (iOS4) dan perangkat + browser yang mendukung HTML5 lainnya

Penggunaannya sesederhana:

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

Berikut ini adalah demo dalam aksi: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

Ini adalah pertanyaan yang cukup lama tetapi saya ingin menambahkan beberapa info berguna. Pemula topik telah menyebutkan bahwa dia "making a game". Jadi untuk semua orang yang membutuhkan audio untuk pengembangan game ada pilihan yang lebih baik daripada hanya <audio>tag atau HTMLAudioElement. Saya pikir Anda harus mempertimbangkan penggunaan API Audio Web :

Sementara audio di web tidak lagi membutuhkan plugin, tag audio membawa batasan yang signifikan untuk mengimplementasikan permainan canggih dan aplikasi interaktif. Web Audio API adalah API JavaScript tingkat tinggi untuk memproses dan mensintesis audio dalam aplikasi web. Tujuan API ini adalah untuk memasukkan kemampuan yang ditemukan dalam mesin audio game modern dan beberapa tugas pencampuran, pemrosesan, dan pemfilteran yang ditemukan dalam aplikasi produksi audio desktop modern.

Mudah dengan Jquery

// atur tag audio tanpa preload

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

// tambahkan jquery untuk dimuat

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

// tulis metode untuk bermain dan berhenti

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

// putuskan cara mengontrol audio

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

EDIT

Untuk menjawab pertanyaan @ stomy, berikut adalah bagaimana Anda akan menggunakan pendekatan ini untuk memainkan daftar putar :

Setel lagu Anda di objek:

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

Gunakan fungsi pemicu dan putar seperti sebelumnya:

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

Muat lagu pertama secara dinamis:

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

Setel ulang sumber audio ke lagu berikutnya dalam daftar putar, ketika lagu saat ini berakhir:

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

Lihat di sini untuk contoh kode ini dalam aksi.

Tambahkan audio tersembunyi dan mainkan.

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

Jika Anda mendapatkan kesalahan berikut:

Tidak tertangkap (berjanji) DOMException: play () gagal karena pengguna tidak berinteraksi dengan dokumen terlebih dahulu.

Itu berarti pengguna harus berinteraksi dengan situs web terlebih dahulu (seperti pesan kesalahan). Dalam hal ini Anda perlu menggunakan clickatau hanya pendengar acara lain, sehingga pengguna dapat berinteraksi dengan situs web Anda.

Jika Anda ingin memuat audio secara otomatis dan tidak ingin pengguna berinteraksi dengan dokumen terlebih dahulu, Anda dapat menggunakannya setTimeout.

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

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

Suara akan mulai setelah 0,5 detik.

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

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

Solusi yang cukup sederhana jika Anda memiliki tag HTML seperti di bawah ini:

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

Cukup gunakan JavaScript untuk memainkannya, seperti:

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

Saya memiliki beberapa masalah yang berkaitan dengan pengembalian objek janji audio dan beberapa masalah yang berkaitan dengan interaksi pengguna dengan suara yang akhirnya saya gunakan objek kecil ini,

Saya akan merekomendasikan untuk mengimplementasikan suara yang paling dekat dengan interaksi yang digunakan oleh pengguna.

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

Dan implementasikan sebagai berikut:

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

Saya menggunakan metode ini untuk memainkan suara ...

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

jika Anda ingin memutar audio Anda setiap kali halaman dibuka maka lakukan seperti ini.

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

dan panggil playMusic ini () kapan pun Anda butuhkan dalam kode game Anda.

Dengan persyaratan keamanan bahwa pengguna harus berinteraksi dengan laman web agar audio diizinkan, beginilah cara saya melakukannya, berdasarkan pada membaca banyak artikel, termasuk di situs ini

1. Tentukan file audio yang diperlukan dalam html Anda
2. Miliki tombol mulai permainan dengan klik
3. Ketika tombol diklik, mainkan dan jeda SEMUA file audio bilah yang ingin Anda mainkan di awal

Karena semua file audio telah "diputar" di OnClick yang sama, kini Anda dapat memutarnya kapan saja di game tanpa batasan

Perhatikan bahwa untuk kompatibilitas terbaik tidak menggunakan file wav, MS tidak mendukungnya

Gunakan mp3 dan ogg, yang mencakup semua perangkat

Contoh:

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

ulangi sesuai kebutuhan untuk semua audio dalam game

Kemudian:

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

ulangi sesuai kebutuhan kecuali jangan menghentikan audio yang ingin Anda dengar saat permainan dimulai

Anda dapat menggunakan API Audio Web untuk memainkan suara. Ada beberapa perpustakaan audio di luar sana seperti howler.js, soundjs dll. Jika Anda tidak khawatir tentang browser lama maka Anda juga dapat memeriksa http://musquitojs.com/ . Ini menyediakan API sederhana untuk membuat dan memutar suara.

Misalnya, memainkan suara yang harus Anda lakukan adalah.

import $buzz from 'musquito';

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

buzz.play();

Perpustakaan juga mendukung Audio Sprite.

Ini adalah beberapa JS yang saya buat dengan proyek bayi AI yang sedang saya kerjakan. Saya harap ini bisa membantu Anda.

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

Gunakan ini saja:

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

Atau, untuk membuatnya lebih sederhana:

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

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

</video>

Sampel:

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

TIDAK PUNYA IDEA jika ini berfungsi di browser lain selain Chrome 73 !!

Saya memiliki beberapa masalah dengan memutar audio, terutama karena Chrome telah memperbarui bahwa pengguna harus berinteraksi dengan dokumen terlebih dahulu.

Namun, di hampir semua solusi yang saya temukan adalah bahwa kode JS harus secara aktif mengatur pendengar (mis. Klik tombol) untuk menerima acara pengguna untuk memutar audio.

Dalam kasus saya, saya hanya ingin permainan saya untuk bermain BGM segera setelah pemain berinteraksi dengannya, jadi saya membuat diri saya menjadi pendengar sederhana yang terus memeriksa apakah halaman web sedang berinteraksi atau tidak.

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 )

Ini adalah solusi untuk tahun 2020 ketika Anda melihat kesalahan:

[Kesalahan] Penolakan Janji Tidak Tertangani: NotSupportedError: Operasi tidak didukung. (fungsi anonim) rejectPromise play (fungsi anonim) (testaudio.html: 96) pengiriman (jquery-3.4.1.min.js: 2: 42577)

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

Jangan licin dan berpikir ooh itu sekolah tua oclick, saya hanya akan memindahkannya ke halaman jQuery saya atau file JavaScript eksternal saya. Nggak. Perlu menjadi onclick.