ฉันจะทำเช่นนั้นได้อย่างไรดังนั้นเมื่อใดก็ตามที่ผู้ใช้คลิกลิงก์เราจะส่งเสียง ใช้ javascript และ jquery ที่นี่
.load()
, .play()
พวกเขาในช่วงเวลาที่สำคัญโดยใช้ API
ฉันจะทำเช่นนั้นได้อย่างไรดังนั้นเมื่อใดก็ตามที่ผู้ใช้คลิกลิงก์เราจะส่งเสียง ใช้ javascript และ jquery ที่นี่
.load()
, .play()
พวกเขาในช่วงเวลาที่สำคัญโดยใช้ API
คำตอบ:
ใช้ปลั๊กอินนี้: https://github.com/admsev/jquery-play-sound
$.playSound('http://example.org/sound.mp3');
ใส่<audio>
องค์ประกอบบนหน้าของคุณ
รับองค์ประกอบเสียงของคุณและเรียกใช้play()
เมธอด:
document.getElementById('yourAudioTag').play();
ดูตัวอย่างนี้: http://www.storiesinflight.com/html5/audio.html
เว็บไซต์นี้ปล่องบางส่วนของสิ่งดีๆอื่น ๆ ที่คุณสามารถทำได้เช่นload()
, pause()
และไม่กี่คุณสมบัติอื่น ๆ ขององค์ประกอบเสียง
เมื่อใดที่คุณต้องการเล่นองค์ประกอบเสียงนี้ขึ้นอยู่กับคุณ อ่านข้อความของปุ่มและเปรียบเทียบกับ "ไม่" ถ้าคุณต้องการ
http://www.schillmania.com/projects/soundmanager2/
SoundManager 2 มี API ที่ใช้งานง่ายซึ่งช่วยให้เล่นเสียงได้ในเบราว์เซอร์สมัยใหม่รวมถึง IE 6+ หากเบราว์เซอร์ไม่รองรับ HTML5 แสดงว่าได้รับความช่วยเหลือจากแฟลช หากคุณต้องการ HTML5 ที่เข้มงวดและไม่ใช้แฟลชก็มีการตั้งค่าสำหรับสิ่งนั้นเช่น Flash = 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');
});
นี่คือตัวอย่างการใช้งานจริง: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/
พบสิ่งที่ต้องการ:
//javascript:
function playSound( url ){
document.getElementById("sound").innerHTML="<embed src='"+url+"' hidden=true autostart=true loop=false>";
}
การใช้แท็กเสียง html5 และ jquery:
// appending HTML5 Audio Tag in HTML Body
$('<audio id="chatAudio">
<source src="notify.ogg" type="audio/ogg">
<source src="notify.mp3" type="audio/mpeg">
</audio>').appendTo('body');
// play sound
$('#chatAudio')[0].play();
ในการใช้งานของฉันฉันได้เพิ่มการฝังเสียงลงใน HTML โดยตรงโดยไม่ต้องต่อท้าย jquery
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first
Chrome Version 70.0.3538.102 (Official Build) (64-bit)
... ดูเหมือนจะเป็นวิธีแก้ปัญหาที่นี่: stackoverflow.com/a/52821721
โปรแกรมจัดการเสียง JavaScript:
$('a').click(function(){
$('embed').remove();
$('body').append('<embed src="/path/to/your/sound.wav" autostart="true" hidden="true" loop="false">');
});
ฉันเขียนฟังก์ชันเล็ก ๆ ที่สามารถทำได้ด้วย Web Audio API ...
var beep = function(duration, type, finishedCallback) {
if (!(window.audioContext || window.webkitAudioContext)) {
throw Error("Your browser does not support Audio Context.");
}
duration = +duration;
// Only 0-4 are valid types.
type = (type % 5) || 0;
if (typeof finishedCallback != "function") {
finishedCallback = function() {};
}
var ctx = new (window.audioContext || window.webkitAudioContext);
var osc = ctx.createOscillator();
osc.type = type;
osc.connect(ctx.destination);
osc.noteOn(0);
setTimeout(function() {
osc.noteOff(0);
finishedCallback();
}, duration);
};
เกิดใหม่ ... ดูเหมือนว่าจะเข้ากันได้กับเบราว์เซอร์ IE, Gecko และ iPhone ...
รหัสต่อไปนี้อาจช่วยให้คุณเล่นเสียงในหน้าเว็บโดยใช้จาวาสคริปต์เท่านั้น สามารถดูรายละเอียดเพิ่มเติมได้ที่http://sourcecodemania.com/playing-sound-javascript-flash-player/
<script>
function getPlayer(pid) {
var obj = document.getElementById(pid);
if (obj.doPlay) return obj;
for(i=0; i<obj.childNodes.length; i++) {
var child = obj.childNodes[i];
if (child.tagName == "EMBED") return child;
}
}
function doPlay(fname) {
var player=getPlayer("audio1");
player.play(fname);
}
function doStop() {
var player=getPlayer("audio1");
player.doStop();
}
</script>
<form>
<input type="button" value="Play Sound" onClick="doPlay('texi.wav')">
<a href="#" onClick="doPlay('texi.wav')">[Play]</a>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width="40"
height="40"
id="audio1"
align="middle">
<embed src="wavplayer.swf?h=20&w=20"
bgcolor="#ffffff"
width="40"
height="40"
allowScriptAccess="always"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
/>
</object>
<input type="button" value="Stop Sound" onClick="doStop()">
</form>
ก่อนอื่นฉันไม่ชอบสิ่งนั้นในฐานะผู้ใช้
วิธีที่ดีที่สุดคือใช้แฟลชแอพเพล็ตขนาดเล็กที่เล่นเสียงของคุณเป็นพื้นหลัง
ยังมีคำตอบที่นี่: ข้ามแพลตฟอร์มข้ามเบราว์เซอร์วิธีเล่นเสียงจาก Javascript?