เล่นเสียงด้วย Javascript หรือไม่


692

ฉันกำลังสร้างเกมด้วย HTML5 และ Javascript

ฉันจะเล่นเสียงเกมผ่าน Javascript ได้อย่างไร


9
เพราะมันของ HTML5 <audio>มี องค์ประกอบนั้นจะมีตะขอ JS ที่เหมาะสมสำหรับ 'เล่น', 'หยุดชั่วคราว' ฯลฯ ...
Marc B

1
@ Marc คุณช่วยให้ข้อมูลบางอย่างเกี่ยวกับสิ่งที่ hooks เหล่านั้นคืออะไร?
Ryan S.

14
ฉันพนันได้เลยว่าคุณสงสัยว่าเอกสารนี้มีไว้สำหรับวิธีการด้านเสียงทั้งหมด: stackoverflow.com/questions/4589451/…
Bryan Downing

คำตอบ:


1334

หากคุณไม่ต้องการยุ่งกับองค์ประกอบ HTML:

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

นี้ใช้HTMLAudioElementอินเตอร์เฟซที่เล่นเสียงแบบเดียวกับที่เป็นองค์ประกอบ<audio>


หากคุณต้องการฟังก์ชั่นเพิ่มเติมฉันใช้ห้องสมุดhowler.jsและพบว่าง่ายและมีประโยชน์


9
วิธีนี้ใช้ได้กับการเล่น mp3 แต่ไม่เหมาะสำหรับไฟล์ wav มีวิธีการเล่นไฟล์ wav ไหม?
user781486

12
@ user3293156 วิธีการนี้จะสนับสนุนรูปแบบเดียวกับ <audio>HTML5 วิกิพีเดียมีตารางการทำงานร่วมกันรูปแบบเสียง new Audio()สามารถเล่นไฟล์ WAV ในเบราว์เซอร์ทั้งหมดยกเว้น Internet Explorer
Rory O'Kane

283
@ RoryO'Kane เพื่อให้ทุกคนสามารถเล่นรูปแบบเสียงของ Microsoft ได้ยกเว้น microsoft? lol
Dave Cousineau

10
คำเตือนคู่ (1) Firefox จะไม่เล่น mp3 คุณจะต้องใช้ไฟล์ ogg แทน (2) Safari / iOS จะไม่เล่นถ้าคุณกำลังให้บริการเนื้อหาผ่าน HTTPS คุณจะต้องมีใบรับรองที่ถูกต้อง
ปีเตอร์

9
โปรดสังเกตว่าจากเมษายน 2018 บน Chrome จะไม่เล่นไฟล์เสียงเว้นแต่ผู้ใช้มีการคลิกอย่างน้อยหนึ่งครั้งในเอกสาร ดูที่นี่
Nils Lindemann

181

ง่ายเพียงรับaudioองค์ประกอบของคุณและเรียกplay()วิธีการ:

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

ลองดูตัวอย่างนี้: http://www.storiesinflight.com/html5/audio.html

เว็บไซต์นี้ปล่องบางส่วนของสิ่งดีๆอื่น ๆ ที่คุณสามารถทำได้เช่นload(), pause()และคุณสมบัติอื่น ๆ ไม่กี่ของaudioองค์ประกอบ


38

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

SoundManager 2 เป็น API ที่ใช้งานง่ายซึ่งอนุญาตให้เล่นเสียงในเบราว์เซอร์สมัยใหม่รวมถึง IE 6+ หากเบราว์เซอร์ไม่รองรับ HTML5 แสดงว่าได้รับความช่วยเหลือจากแฟลช หากคุณต้องการ HTML5 อย่างเข้มงวดและไม่มีแฟลชมีการตั้งค่าสำหรับสิ่งนั้นpreferFlash=false

รองรับไฟล์เสียงฟรี 100% บน iPad, iPhone (iOS4) และอุปกรณ์อื่น ๆ + เบราว์เซอร์ที่ใช้ HTML5

ใช้ง่ายเหมือน:

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


3
โดยทั่วไปเมื่อคุณให้ลิงค์ในเว็บไซต์นี้คุณให้ข้อมูลบางอย่างจากลิงค์ในโพสต์ของคุณ ไม่แนะนำให้โพสต์ลิงก์อย่างง่ายและพูดว่า "คลิกที่นี่"
Ryan S.

7
ขออภัยฉันคิดว่าเว็บไซต์จะอธิบายตัวเอง ฉันจะแก้ไขมันแล้ว
LordZardeck

32

นี่เป็นคำถามที่ค่อนข้างเก่า แต่ฉันต้องการเพิ่มข้อมูลที่มีประโยชน์ "making a game"เริ่มต้นหัวข้อได้กล่าวถึงว่าเขาเป็น ดังนั้นสำหรับทุกคนที่ต้องการเสียงสำหรับการพัฒนาเกมมีทางเลือกที่ดีกว่าเพียงแค่แท็กหรือ<audio> HTMLAudioElementฉันคิดว่าคุณควรพิจารณาการใช้Web Audio API :

ในขณะที่เสียงบนเว็บไม่ต้องการปลั๊กอินอีกต่อไปแท็กเสียงจะนำข้อ จำกัด ที่สำคัญสำหรับการใช้งานเกมที่ซับซ้อนและแอปพลิเคชั่นแบบโต้ตอบ Web Audio API เป็น JavaScript API ระดับสูงสำหรับการประมวลผลและสังเคราะห์เสียงในเว็บแอปพลิเคชัน เป้าหมายของ API นี้คือการรวมความสามารถที่พบในเอ็นจิ้นเสียงเกมที่ทันสมัยและงานผสมการประมวลผลและการกรองบางอย่างที่พบในแอปพลิเคชันการผลิตเสียงบนเดสก์ท็อปสมัยใหม่


22

ง่ายด้วย 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');
});

ดูตัวอย่างโค้ดที่นี่ได้จากที่นี่


สิ่งนี้เล่นแท็กเสียงทั้งหมดที่มี class = "my_audio" ในเวลาเดียวกัน คุณจะเล่นแบบเรียงต่อกันได้อย่างไร
stomy

@stomy คุณโพสต์สิ่งนี้เนื่องจากเป็นคำถามของตัวเองใน StackOverflow หรือไม่ หากคุณแจ้งให้เราทราบ ฉันสามารถช่วยคุณได้ มิฉะนั้นฉันจะเสนอสิ่งนี้ - คุณสามารถ (หลังจากที่คุณเริ่มเล่นเพลง) ฟังendedเหตุการณ์ที่จะถูกปล่อยออกมาและเริ่มต้นไฟล์เสียงถัดไปในรายการ (สันนิษฐานว่าคุณกำลังติดตามทั้งใน DOM, หน่วยความจำ JS ฯลฯ ) developer.mozilla.org/en-US/docs/Web/Events/ended
Sgnl

@stomy โปรดตรวจสอบการแก้ไขในคำตอบของฉันเพื่อสร้างรายการเพลงที่เล่นเพลงติดต่อกัน
Cybernetic

15

เพิ่มเสียงที่ซ่อนอยู่และเล่น

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

14

หากคุณได้รับข้อผิดพลาดต่อไปนี้:

Uncaught (ตามสัญญา) DOMException: play () ล้มเหลวเนื่องจากผู้ใช้ไม่ได้โต้ตอบกับเอกสารก่อน

นั่นหมายความว่าผู้ใช้ต้องมีปฏิสัมพันธ์กับเว็บไซต์ก่อน (ตามที่ระบุไว้ในข้อความแสดงข้อผิดพลาด) ในกรณีนี้คุณต้องใช้clickหรือเป็นเพียงผู้ฟังเหตุการณ์อื่นเพื่อให้ผู้ใช้สามารถโต้ตอบกับเว็บไซต์ของคุณ

setTimeoutหากคุณต้องการที่จะโหลดอัตโนมัติเสียงและไม่ต้องการให้ผู้ใช้สามารถโต้ตอบกับเอกสารแรกที่คุณสามารถใช้

setTimeout(() => {
  document.getElementById('mySound').play();
}, 500)
<audio id="mySound" src="sound.mp3"></audio>

เสียงจะเริ่มขึ้นหลังจาก 0.5 วินาที


มันไม่ทำงาน ไม่ใช่ใน Chrome ไม่อีกแล้ว.
Arfeo



5

ทางออกที่ง่ายมากหากคุณมีแท็ก HTML ดังต่อไปนี้:

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

เพียงใช้ JavaScript เพื่อเล่น:

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

คุณหมายถึงใช้ </a> หรือ </audio> แค่สงสัย.
คูเปอร์

ฉันใช้แท็ก <audio>
Ben Stafford

1
เบ็นตัวอย่างของคุณมีแท็กปิดที่ไม่ถูกต้องนั่นคือสาเหตุที่ @Cooper ถามคำถามนั้น ฉันแก้ไขคำตอบด้วยแท็กปิดที่ถูกต้อง
Sgnl

4

ฉันมีปัญหาบางอย่างที่เกี่ยวข้องกับการส่งคืนวัตถุสัญญาเสียงและบางประเด็นที่เกี่ยวข้องกับการโต้ตอบกับผู้ใช้กับเสียงที่ฉันใช้งานด้วยวัตถุขนาดเล็กนี้

ฉันอยากจะแนะนำให้ใช้การเล่นเสียงที่ใกล้เคียงที่สุดกับเหตุการณ์การโต้ตอบที่ผู้ใช้กำลังใช้

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>

ไม่ทำงานบน Safari ถ้าฉันทริกเกอร์เล่นอัตโนมัติจาก JS
maki10

1
@ maki10 สวัสดีฉันทดสอบในเดสก์ท็อปซาฟารีเวอร์ชัน 12.0.3 (14606.4.5) และใช้งานได้ที่นี่: jsfiddle.net/xf5zyv4q/5
talsibony

สามารถใช้งานบนมือถือซาฟารี IOS 12
talsibony

การเชื่อมโยงการปรับปรุง I สำหรับปัญหาของฉันjsfiddle.net/6431mfb5 สำหรับฉันการเล่นอัตโนมัติจะทำงานเฉพาะครั้งแรกในซาฟารีและใหม่กว่า
maki10

@ maki10 เพราะคุณโทรหาโดยที่ผู้ใช้ไม่ต้องดำเนินการใด ๆ การเล่นอัตโนมัติจะไม่ทำงานโดยไม่ต้องมีการโต้ตอบกับผู้ใช้เช่นการคลิกคลิกลบบรรทัดสุดท้าย: soundPlayer.play (' interactive-examples.mdn.mozilla.net/media/examples/ ...... );
talsibony

3

ฉันใช้วิธีนี้เพื่อเล่นเสียง ...

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

3

ด้วยข้อกำหนดด้านความปลอดภัยที่ผู้ใช้จะต้องโต้ตอบกับหน้าเว็บเพื่อให้ได้เสียงนี่เป็นวิธีที่ฉันทำตามการอ่านบทความจำนวนมากรวมถึงในเว็บไซต์นี้

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

ทำซ้ำตามต้องการยกเว้นอย่าหยุดเสียงที่คุณต้องการฟังเมื่อเกมเริ่ม


2

หากคุณต้องการเล่นเสียงของคุณเมื่อใดก็ตามที่เปิดหน้าเว็บให้ทำเช่นนี้

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

และเรียก playMusic นี้ () ทุกครั้งที่คุณต้องการในรหัสเกม


1

คุณสามารถใช้ Web Audio API เพื่อเล่นเสียง มีค่อนข้างบางห้องสมุดเสียงออกมีเช่น howler.js, soundjs ฯลฯ ถ้าคุณไม่ต้องกังวลเกี่ยวกับเบราว์เซอร์เก่าแล้วคุณยังสามารถตรวจสอบการมีhttp://musquitojs.com/ มันมี API ง่าย ๆ ในการสร้างและเล่นเสียง

ตัวอย่างเช่นการเล่นเสียงทั้งหมดที่คุณต้องทำคือ

import $buzz from 'musquito';

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

buzz.play();

ห้องสมุดยังรองรับ Audio Sprites


0

นี่คือ JS บางตัวที่ฉันคิดเกี่ยวกับโครงการ AI ของทารกที่ทำงานด้วย ฉันหวังว่านี่จะช่วยคุณได้

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

0

เพียงใช้สิ่งนี้:

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

ไม่มี IDEA ถ้าใช้งานได้กับเบราว์เซอร์อื่นที่ไม่ใช่ Chrome 73 !!


นี่เป็นคำตอบที่ง่ายและสะอาด ไม่มี jquery เลย !!
IMSMART

0

ฉันมีปัญหาบางอย่างกับการเล่นเสียงโดยเฉพาะอย่างยิ่งเนื่องจาก Chrome ได้อัปเดตว่าผู้ใช้จะต้องโต้ตอบกับเอกสารก่อน

อย่างไรก็ตามในโซลูชันเกือบทั้งหมดที่ฉันพบคือรหัส JS ต้องตั้งค่าผู้ฟัง (เช่นการคลิกปุ่ม) เพื่อรับเหตุการณ์ผู้ใช้เพื่อเล่นเสียง

ในกรณีของฉันฉันแค่อยากให้เกมของฉันเล่น 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 )

0

นี่เป็นวิธีแก้ปัญหาสำหรับปี 2020 เมื่อคุณเห็นข้อผิดพลาด:

[ข้อผิดพลาด] การปฏิเสธสัญญาที่ไม่สามารถจัดการได้: NotSupportedError: การดำเนินการไม่ได้รับการสนับสนุน (ฟังก์ชั่นที่ไม่ระบุชื่อ) ปฏิเสธการเล่น (ฟังก์ชั่นที่ไม่ระบุชื่อ) (testaudio.html: 96) การจัดส่ง (jquery-3.4.1.min.js: 2: 42577)


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

อย่าเฉยเมยและคิดว่าโอ้เป็นโรงเรียนเก่าoclickฉันจะย้ายมันลงไปที่หน้า jQuery หรือไฟล์ JavaScript ภายนอกของฉัน Nope onclickมันต้องเป็น

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.