Как я могу это сделать, чтобы каждый раз, когда пользователь нажимает на ссылку, мы воспроизводим звук? Здесь используются javascript и jquery.
javascript
jquery
audio
Нажмите Голосовать за
источник
источник
.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, тогда ему поможет flash. Если вам нужен строго HTML5 и нет flash, для этого есть настройка, preferenceFlash = false.
Он поддерживает 100% аудио без Flash на 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
ChromeVersion 70.0.3538.102 (Official Build) (64-bit)
... кажется решением здесь: stackoverflow.com/a/52821721Звуковой менеджер JavaScript:
http://www.schillmania.com/projects/soundmanager2/
источник
$('a').click(function(){ $('embed').remove(); $('body').append('<embed src="/path/to/your/sound.wav" autostart="true" hidden="true" loop="false">'); });
источник
Я написал небольшую функцию, которая может это сделать с помощью 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); };
источник
Новый Emerger ... кажется, пока совместим с браузерами IE, Gecko и iPhone ...
http://www.jplayer.org/
источник
Следующий код может помочь вам воспроизводить звук на веб-странице только с использованием javascript. Вы можете увидеть более подробную информацию на 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?
источник