ฉันกำลังสร้างเกมด้วย HTML5 และ Javascript
ฉันจะเล่นเสียงเกมผ่าน Javascript ได้อย่างไร
ฉันกำลังสร้างเกมด้วย HTML5 และ Javascript
ฉันจะเล่นเสียงเกมผ่าน Javascript ได้อย่างไร
คำตอบ:
หากคุณไม่ต้องการยุ่งกับองค์ประกอบ HTML:
var audio = new Audio('audio_file.mp3');
audio.play();
นี้ใช้HTMLAudioElement
อินเตอร์เฟซที่เล่นเสียงแบบเดียวกับที่เป็นองค์ประกอบ<audio>
หากคุณต้องการฟังก์ชั่นเพิ่มเติมฉันใช้ห้องสมุดhowler.jsและพบว่าง่ายและมีประโยชน์
<audio>
HTML5 วิกิพีเดียมีตารางการทำงานร่วมกันรูปแบบเสียง new Audio()
สามารถเล่นไฟล์ WAV ในเบราว์เซอร์ทั้งหมดยกเว้น Internet Explorer
ง่ายเพียงรับaudio
องค์ประกอบของคุณและเรียกplay()
วิธีการ:
document.getElementById('yourAudioTag').play();
ลองดูตัวอย่างนี้: http://www.storiesinflight.com/html5/audio.html
เว็บไซต์นี้ปล่องบางส่วนของสิ่งดีๆอื่น ๆ ที่คุณสามารถทำได้เช่นload()
, pause()
และคุณสมบัติอื่น ๆ ไม่กี่ของaudio
องค์ประกอบ
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/
นี่เป็นคำถามที่ค่อนข้างเก่า แต่ฉันต้องการเพิ่มข้อมูลที่มีประโยชน์ "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');
});
ended
เหตุการณ์ที่จะถูกปล่อยออกมาและเริ่มต้นไฟล์เสียงถัดไปในรายการ (สันนิษฐานว่าคุณกำลังติดตามทั้งใน DOM, หน่วยความจำ JS ฯลฯ ) developer.mozilla.org/en-US/docs/Web/Events/ended
เพิ่มเสียงที่ซ่อนอยู่และเล่น
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);
}
หากคุณได้รับข้อผิดพลาดต่อไปนี้:
Uncaught (ตามสัญญา) DOMException: play () ล้มเหลวเนื่องจากผู้ใช้ไม่ได้โต้ตอบกับเอกสารก่อน
นั่นหมายความว่าผู้ใช้ต้องมีปฏิสัมพันธ์กับเว็บไซต์ก่อน (ตามที่ระบุไว้ในข้อความแสดงข้อผิดพลาด) ในกรณีนี้คุณต้องใช้click
หรือเป็นเพียงผู้ฟังเหตุการณ์อื่นเพื่อให้ผู้ใช้สามารถโต้ตอบกับเว็บไซต์ของคุณ
setTimeout
หากคุณต้องการที่จะโหลดอัตโนมัติเสียงและไม่ต้องการให้ผู้ใช้สามารถโต้ตอบกับเอกสารแรกที่คุณสามารถใช้
setTimeout(() => {
document.getElementById('mySound').play();
}, 500)
<audio id="mySound" src="sound.mp3"></audio>
เสียงจะเริ่มขึ้นหลังจาก 0.5 วินาที
new Audio('./file.mp3').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();
ด้วยข้อกำหนดด้านความปลอดภัยที่ผู้ใช้จะต้องโต้ตอบกับหน้าเว็บเพื่อให้ได้เสียงนี่เป็นวิธีที่ฉันทำตามการอ่านบทความจำนวนมากรวมถึงในเว็บไซต์นี้
เนื่องจากไฟล์เสียงทั้งหมดได้รับการ "เล่น" ใน 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();
ห้องสมุดยังรองรับ Audio Sprites
นี่คือ 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>
เพียงใช้สิ่งนี้:
<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 !!
ฉันมีปัญหาบางอย่างกับการเล่นเสียงโดยเฉพาะอย่างยิ่งเนื่องจาก 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 )
นี่เป็นวิธีแก้ปัญหาสำหรับปี 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
มันต้องเป็น
<audio>
มี องค์ประกอบนั้นจะมีตะขอ JS ที่เหมาะสมสำหรับ 'เล่น', 'หยุดชั่วคราว' ฯลฯ ...