Bagaimana saya bisa melakukannya, jadi setiap kali pengguna mengklik tautan, kami memutar suara? Menggunakan javascript dan jquery disini.
javascript
jquery
audio
Klik Suka
sumber
sumber
.load()
,.play()
pada saat-saat penting menggunakan api.Jawaban:
Gunakan plugin ini: https://github.com/admsev/jquery-play-sound
$.playSound('http://example.org/sound.mp3');
sumber
Letakkan
<audio>
elemen di halaman Anda.Dapatkan elemen audio Anda dan panggil
play()
metode:document.getElementById('yourAudioTag').play();
Lihat contoh ini: http://www.storiesinflight.com/html5/audio.html
Situs ini mengungkapkan beberapa hal menarik lainnya yang dapat Anda lakukan seperti
load()
,pause()
, dan beberapa properti lainnya dari unsur audio.Kapan tepatnya Anda ingin memainkan elemen audio ini terserah Anda. Bacalah teks tombol dan bandingkan dengan "tidak" jika Anda suka.
kalau tidak
http://www.schillmania.com/projects/soundmanager2/
SoundManager 2 menyediakan API yang mudah digunakan yang memungkinkan suara diputar di browser modern apa pun, termasuk IE 6+. Jika browser tidak mendukung HTML5, maka itu mendapat bantuan dari flash. Jika Anda menginginkan HTML5 yang ketat dan tidak ada flash, ada pengaturan untuk itu, preferFlash = false
Ini mendukung 100% audio bebas Flash di iPad, iPhone (iOS4) dan perangkat + browser yang mendukung HTML5
Penggunaannya sesederhana:
<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'); });
Berikut demo aksinya: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/
sumber
Menemukan sesuatu seperti itu:
//javascript: function playSound( url ){ document.getElementById("sound").innerHTML="<embed src='"+url+"' hidden=true autostart=true loop=false>"; }
sumber
Menggunakan tag audio html5 dan 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();
Kode dari sini .
Dalam implementasi saya, saya menambahkan audio embed langsung ke HTML tanpa jquery append.
sumber
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first
Version 70.0.3538.102 (Official Build) (64-bit)
Pengelola Suara JavaScript:
http://www.schillmania.com/projects/soundmanager2/
sumber
$('a').click(function(){ $('embed').remove(); $('body').append('<embed src="/path/to/your/sound.wav" autostart="true" hidden="true" loop="false">'); });
sumber
Saya menulis fungsi kecil yang dapat melakukannya, dengan API Audio Web ...
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); };
sumber
Pemunculan baru ... tampaknya kompatibel dengan IE, browser Gecko, dan iPhone sejauh ini ...
http://www.jplayer.org/
sumber
Kode berikut mungkin membantu Anda memainkan suara di halaman web dengan hanya menggunakan javascript. Anda dapat melihat detail lebih lanjut di 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>
sumber
Hal pertama yang pertama, saya tidak suka itu sebagai pengguna.
Cara terbaik untuk melakukannya mungkin menggunakan applet flash kecil yang memutar suara Anda di latar belakang.
Juga dijawab di sini: Cara lintas platform, lintas browser untuk memutar suara dari Javascript?
sumber