자바 스크립트로 오디오를 재생 하시겠습니까?

HTML5 및 Javascript로 게임을 만들고 있습니다.

Javascript를 통해 게임 오디오를 어떻게 재생할 수 있습니까?

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>

이것은 요소HTMLAudioElement 와 같은 방식으로 오디오를 재생 하는 인터페이스를 사용합니다 .<audio>

더 많은 기능이 필요하면 howler.js 라이브러리를 사용하여 간단하고 유용하다는 것을 알았습니다.

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

간단합니다. audio요소를 가져 와서 play()메소드를 호출하십시오 .

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

이 예제를 확인하십시오 : http://www.storiesinflight.com/html5/audio.html

이 사이트 는 당신이 할 수있는 다른 멋진 일들을 발견합니다 load().pause() 그리고 몇 가지 다른 속성 audio요소를.

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

SoundManager 2는 IE 6 이상을 포함한 최신 브라우저에서 사운드를 재생할 수있는 사용하기 쉬운 API를 제공합니다. 브라우저가 HTML5를 지원하지 않으면 플래시에서 도움을받습니다. 엄격하게 HTML5를 원하고 플래시를 사용하지 않으려면 설정이 있습니다.preferFlash=false

iPad, iPhone (iOS4) 및 기타 HTML5 지원 장치 및 브라우저에서 100 % Flash-free 오디오를 지원합니다

사용은 다음과 같이 간단합니다.

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

실제 데모는 다음과 같습니다. http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

이것은 매우 오래된 질문이지만 유용한 정보를 추가하고 싶습니다. 토픽 스타터는 그가 있다고 언급했다 "making a game". 따라서 게임 개발을 위해 오디오가 필요한 모든 사람에게는 <audio>태그 또는 태그 보다 더 나은 선택이 있습니다 HTMLAudioElement. Web Audio API 사용을 고려해야한다고 생각합니다 .

웹의 오디오에는 더 이상 플러그인이 필요하지 않지만 오디오 태그는 정교한 게임 및 대화 형 응용 프로그램을 구현하는 데 상당한 제한이 따릅니다. Web Audio API는 웹 응용 프로그램에서 오디오를 처리하고 합성하기위한 고급 JavaScript API입니다. 이 API의 목적은 최신 게임 오디오 엔진에서 발견되는 기능과 최신 데스크탑 오디오 제작 응용 프로그램에서 발견되는 일부 믹싱, 처리 및 필터링 작업을 포함하는 것입니다.

Jquery로 쉽게

// 사전로드없이 오디오 태그 설정

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

//로드 할 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');
});

이 코드의 실제 예는 여기 를 참조 하십시오 .

숨겨진 오디오를 추가하고 재생하십시오.

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

다음과 같은 오류가 발생하는 경우

잡히지 않은 DOMException : 사용자가 먼저 문서와 상호 작용하지 않았기 때문에 play ()가 실패했습니다.

즉, 사용자는 먼저 오류 메시지에서 알 수 있듯이 웹 사이트와 상호 작용해야합니다. 이 경우에는click 웹 사이트와 상호 작용할 수 있도록 다른 이벤트 리스너 합니다.

오디오를 자동으로로드하고 사용자가 먼저 문서와 상호 작용하지 않게하려면을 사용할 수 있습니다 setTimeout.

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

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

0.5 초 후에 사운드가 시작됩니다.

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

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

아래와 같은 HTML 태그가 있다면 매우 간단한 해결책입니다.

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

JavaScript를 사용하여 다음과 같이 재생하십시오.

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

오디오 약속 개체 와 관련된 몇 가지 문제가있었습니다. , 나는이 작은 물체를 사용하게 소리와 사용자의 상호 작용에 관한 수익률과 몇 가지 문제

사용자가 사용하는 상호 작용 이벤트에 가장 가까운 재생 사운드를 구현하는 것이 좋습니다.

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

다음과 같이 구현하십시오.

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

나는이 방법을 사용하여 소리를 재생합니다 ...

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

오디오가 허용 되려면 사용자가 웹 페이지와 상호 작용해야하는 보안 요구 사항에 따라이 사이트를 포함하여 많은 기사를 읽었을 때이를 수행하는 방법입니다.

1. HTML에 필요한 오디오 파일을 정의하십시오
2. 클릭시 게임 시작 버튼이 있습니다
3. 버튼을 클릭하면 처음에 재생할 오디오 파일 막대를 모두 재생하고 일시 중지하십시오.

모든 오디오 파일이 동일한 OnClick에서 "재생"되었으므로 게임에서 언제든지 제한없이 재생할 수 있습니다.

최상의 호환성을 위해 WAV 파일을 사용하지 마십시오 .MS는이를 지원하지 않습니다.

모든 장치를 다루는 mp3 및 ogg 사용

예:

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

게임의 모든 오디오에 필요한만큼 반복

그때:

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

게임이 시작될 때 듣고 싶은 오디오를 멈추지 않고 필요한만큼 반복

페이지가 열릴 때마다 오디오를 재생하려면 다음과 같이하십시오.

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

게임 코드에 필요할 때마다이 playMusic ()을 호출하십시오.

사운드 재생에 Web Audio API를 사용할 수 있습니다. howler.js, soundjs 등과 같은 오디오 라이브러리가 많이 있습니다. 오래된 브라우저에 대해 걱정하지 않으면 http://musquitojs.com/ 에서도 확인할 수 있습니다 . 사운드를 생성하고 재생하는 간단한 API를 제공합니다.

예를 들어, 당신이해야 할 모든 소리를 재생하는 것입니다.

import $buzz from 'musquito';

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

buzz.play();

라이브러리는 오디오 스프라이트도 지원합니다.

이것은 내가 함께 일하는 아기 AI 프로젝트에서 생각해 낸 JS입니다. 나는 이것이 당신을 도울 수 있기를 바랍니다.

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

이것을 사용하십시오 :

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

또는 더 간단하게 만들려면

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

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

</video>

견본:

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

Chrome 73 이외의 다른 브라우저에서 작동하면 아이디어가 없습니다!

특히 Chrome에서 사용자가 문서와 먼저 상호 작용해야한다고 업데이트 한 이후 오디오 재생에 문제가있었습니다.

그러나 내가 찾은 거의 모든 솔루션에서 JS 코드는 오디오를 재생하기 위해 사용자 이벤트를 수신하도록 리스너 (예 : 버튼 클릭)를 적극적으로 설정해야한다는 것입니다.

제 경우에는 플레이어가 BGM과 상호 작용하자마자 게임에서 BGM을 재생하기를 원했기 때문에 웹 페이지가 상호 작용하는지 여부를 계속 확인하는 간단한 청취자가되었습니다.

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 )

다음은 오류가 표시 될 때 2020 년에 대한 해결책입니다.

[오류] 처리되지 않은 약속 거부 : NotSupportedError : 작업이 지원되지 않습니다. (익명 함수) rejectPromise play (익명 함수) (testaudio.html : 96) 디스패치 (jquery-3.4.1.min.js : 2 : 42577)

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

매끄럽지 말고 구식 학교라고 생각 oclick하십시오. 페이지 아래로 내 jQuery 또는 외부 JavaScript 파일로 옮기십시오. 아니. 이어야합니다 onclick.