프로그래밍 언어/HTML,CSS,JS

JavaScript를 통해 오디오를 재생하는 방법

Rateye 2021. 6. 25. 10:36
728x90
반응형

 

질문 : JavaScript를 통해 오디오를 재생하는 방법

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/cc0-audio/t-rex-roar.mp3'); audio.play(); }
<button onclick="play()">Play Audio</button>
function play() {
      var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3');
        audio.play();
        }
<button onclick="play()">Play Audio</button>
function play() {
    var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3');
      audio.play();
      }
<button onclick="play()">Play Audio</button>
function play() {
  var audio = new Audio('https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3');
    audio.play();
    }
<button onclick="play()">Play Audio</button>

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

더 많은 기능이 필요한 경우 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/cc0-audio/t-rex-roar.mp3'], volume: 0.5, onend: function () { alert('Finished!'); } }); sound.play() </script>
<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/cc0-audio/t-rex-roar.mp3'],
                        volume: 0.5,
                              onend: function () {
                                      alert('Finished!');
                                            }
                                                });
                                                    sound.play()
                                                    </script>
<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/cc0-audio/t-rex-roar.mp3'],
                  volume: 0.5,
                        onend: function () {
                                alert('Finished!');
                                      }
                                          });
                                              sound.play()
                                              </script>
<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/cc0-audio/t-rex-roar.mp3'],
                volume: 0.5,
                      onend: function () {
                              alert('Finished!');
                                    }
                                        });
                                            sound.play()
                                            </script>
출처 : https://stackoverflow.com/questions/9419263/how-to-play-audio
728x90
반응형