Chơi âm thanh với Javascript?

Tôi đang làm một trò chơi với HTML5 và Javascript.

Làm cách nào tôi có thể phát âm thanh trò chơi qua Javascript?

Nếu bạn không muốn gây rối với các yếu tố 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>

Cái này sử dụng HTMLAudioElementgiao diện, phát âm thanh giống như <audio>phần tử .

Nếu bạn cần thêm chức năng, tôi đã sử dụng thư viện howler.js và thấy nó đơn giản và hữu ích.

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

Thật dễ dàng, chỉ cần lấy audiophần tử của bạn và gọi play()phương thức:

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

Kiểm tra ví dụ này: http://www.storiesinflight.com/html5/audio.html

Trang web này phát hiện ra một số điều thú vị khác bạn có thể làm như load(), pause()và một vài đặc tính khác của audiophần tử.

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

SoundManager 2 cung cấp API dễ sử dụng cho phép phát âm thanh trong bất kỳ trình duyệt hiện đại nào, kể cả IE 6+. Nếu trình duyệt không hỗ trợ HTML5, thì nó sẽ nhận được trợ giúp từ flash. Nếu bạn muốn HTML5 nghiêm ngặt và không có đèn flash, có một cài đặt cho điều đó,preferFlash=false

Nó hỗ trợ 100% âm thanh không có Flash trên iPad, iPhone (iOS4) và các trình duyệt + thiết bị hỗ trợ HTML5 khác

Sử dụng đơn giản như:

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

Đây là bản demo của nó trong hành động: http://www.schillmania.com/projects/soundmanager2/demo/christmas-light/

Đây là một câu hỏi khá cũ nhưng tôi muốn thêm một số thông tin hữu ích. Các chủ đề bắt đầu đã đề cập rằng anh ấy là "making a game". Vì vậy, đối với tất cả mọi người cần âm thanh để phát triển trò chơi, có một sự lựa chọn tốt hơn là chỉ một <audio>thẻ hoặc một HTMLAudioElement. Tôi nghĩ bạn nên xem xét việc sử dụng API Web Audio :

Mặc dù âm thanh trên web không còn yêu cầu plugin, thẻ âm thanh mang đến những hạn chế đáng kể để triển khai các trò chơi và ứng dụng tương tác phức tạp. API Web âm thanh là API JavaScript cấp cao để xử lý và tổng hợp âm thanh trong các ứng dụng web. Mục tiêu của API này là bao gồm các khả năng được tìm thấy trong các công cụ âm thanh trò chơi hiện đại và một số tác vụ trộn, xử lý và lọc được tìm thấy trong các ứng dụng sản xuất âm thanh trên máy tính để bàn hiện đại.

Dễ dàng với Jquery

// đặt thẻ âm thanh không tải trước

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

// thêm jquery để tải

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

// viết phương thức để chơi và dừng

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

// quyết định cách điều khiển âm thanh

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

BIÊN TẬP

Để giải quyết câu hỏi của @ stomy, đây là cách bạn sẽ sử dụng phương pháp này để phát danh sách phát :

Đặt bài hát của bạn trong một đối tượng:

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

Sử dụng chức năng kích hoạt và phát như trước:

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

Tải bài hát đầu tiên một cách linh hoạt:

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

Đặt lại nguồn âm thanh cho bài hát tiếp theo trong danh sách phát, khi bài hát hiện tại kết thúc:

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

Xem ở đây để biết ví dụ về mã này trong thực tế.

Thêm một âm thanh ẩn và chơi 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);
}

Nếu bạn nhận được lỗi sau:

Uncaught (trong lời hứa) DOMException: play () không thành công vì người dùng không tương tác với tài liệu trước.

Điều đó có nghĩa là người dùng cần phải tương tác với trang web trước (như thông báo lỗi nói). Trong trường hợp này, bạn cần sử dụng clickhoặc chỉ một người nghe sự kiện khác, để người dùng có thể tương tác với trang web của bạn.

Nếu bạn muốn tự động tải âm thanh và không muốn người dùng tương tác với tài liệu trước, bạn có thể sử dụng setTimeout.

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

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

Âm thanh sẽ bắt đầu sau 0,5 giây.

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

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

Giải pháp khá đơn giản nếu bạn có thẻ HTML như dưới đây:

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

Chỉ cần sử dụng JavaScript để chơi nó, như vậy:

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

Tôi đã có một số vấn đề liên quan đến trả về đối tượng lời hứa âm thanh và một số vấn đề liên quan đến tương tác của người dùng với âm thanh tôi kết thúc bằng cách sử dụng đối tượng nhỏ này,

Tôi khuyên bạn nên triển khai âm thanh phát gần nhất với người dùng sự kiện tương tác đang sử dụng.

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

Và thực hiện nó như sau:

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

Tôi đã sử dụng phương pháp này để phát âm thanh ...

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

nếu bạn muốn phát âm thanh của mình bất cứ khi nào trang được mở thì hãy làm như thế này.

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

và gọi đây là playMusic () bất cứ khi nào bạn cần trong mã trò chơi của mình.

Với các yêu cầu bảo mật mà người dùng phải tương tác với một trang web để âm thanh được cho phép, đây là cách tôi thực hiện, dựa trên việc đọc nhiều bài viết, bao gồm cả trên trang web này

1. Xác định các tệp âm thanh cần thiết trong html của bạn
2. Có một nút trò chơi bắt đầu với một onclick
3. Khi nhấp vào nút, sau đó phát và tạm dừng TẤT CẢ thanh tệp âm thanh mà bạn muốn phát lúc đầu

Vì tất cả các tệp âm thanh đã được "phát" trên cùng một OnClick, giờ đây bạn có thể phát chúng bất kỳ lúc nào trong trò chơi mà không bị hạn chế

Lưu ý rằng để có khả năng tương thích tốt nhất không sử dụng tệp wav, MS không hỗ trợ chúng

Sử dụng mp3 và ogg, bao gồm tất cả các thiết bị

Thí dụ:

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

lặp lại khi cần thiết cho tất cả âm thanh trong trò chơi

Sau đó:

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

lặp lại khi cần ngoại trừ không tạm dừng âm thanh bạn muốn nghe khi trò chơi bắt đầu

Bạn có thể sử dụng API Web âm thanh để phát âm thanh. Có khá nhiều thư viện âm thanh ngoài kia như howler.js, soundjs, v.v ... Nếu bạn không lo lắng về các trình duyệt cũ thì bạn cũng có thể kiểm tra trên http://musquitojs.com/ . Nó cung cấp một API đơn giản để tạo và phát âm thanh.

Ví dụ, để phát âm thanh tất cả những gì bạn phải làm là.

import $buzz from 'musquito';

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

buzz.play();

Thư viện cũng hỗ trợ Audio Sprites.

Đây là một số JS tôi đã nghĩ ra trong một dự án AI trẻ em đang làm việc với. tôi hy vọng điều này có thể giúp bạn ra ngoài

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

Chỉ cần sử dụng này:

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

Hoặc, để làm cho nó đơn giản hơn:

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

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

</video>

Mẫu vật:

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

KHÔNG CÓ IDEA nếu điều này hoạt động trên các trình duyệt khác ngoài Chrome 73 !!

Tôi gặp một số vấn đề với việc phát âm thanh, đặc biệt là khi Chrome đã cập nhật rằng người dùng phải tương tác với tài liệu trước.

Tuy nhiên, trên hầu hết tất cả các giải pháp tôi tìm thấy là mã JS phải chủ động thiết lập trình nghe (ví dụ: nhấp vào nút) để nhận các sự kiện của người dùng để phát âm thanh.

Trong trường hợp của tôi, tôi chỉ muốn trò chơi của mình chơi BGM ngay khi người chơi tương tác với nó, vì vậy tôi tự tạo cho mình một trình nghe đơn giản để kiểm tra xem trang web có được tương tác hay không.

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 )

Đây là một giải pháp cho năm 2020 khi bạn gặp lỗi:

[Lỗi] Từ chối lời hứa chưa được xử lý: NotSupportedError: Thao tác không được hỗ trợ. (chức năng ẩn danh) từ chối chơi (chức năng ẩn danh) (testaudio.html: 96) công văn (jquery-3.4.1.min.js: 2: 42577)

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

Đừng vội vàng và nghĩ rằng đó là một trường học cũ oclick, tôi sẽ chuyển trang đó xuống jQuery hoặc tệp JavaScript bên ngoài của tôi. Không. Nó cần phải là một onclick.