Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   воспроизведение звука при нажатии на checkbox (https://javascript.ru/forum/events/30132-vosproizvedenie-zvuka-pri-nazhatii-na-checkbox.html)

estet-osa 25.07.2012 12:16

воспроизведение звука при нажатии на checkbox
 
Люди добрые, помогите воспроизвести звук один раз при нажатии на checkbox, в javascript не силен, поделитесь кодом... Желательно подробную инструкцию, типа: "Это вставь сюда, а тут нажми сюда"... Спасибо...

Magneto 25.07.2012 16:17

<label><input type="checkbox" id="miaow">Мяуу!</label>

<script>

var miaow = document.getElementById('miaow');

var audio = new Audio();
	audio.src = 'https://dl.dropbox.com/u/71157056/js.ru/4914_4948-lq.mp3';
	audio.load();

miaow.addEventListener('change', function (event) {
	if (event.target.checked) {
		audio.play();
	};
}, false);

</script>


Будет работать в Chrome, Safari и IE9. Для Opera и Firefox нужен звук в формате OGG.

Полезные ссылки:
HTML5 Audio — cостояние дел. Часть 1
Освоение HTML5 тега audio
ну и Поиск статей про <audio> на Хабрахабр

estet-osa 25.07.2012 17:11

:yes: Спасибо тебе друг, чтобы я делал без тебя:) И котенок прикольный, себе его оставлю:) Пригодится:)

ruslan_mart 25.07.2012 18:34

Лучше создать флеш со звуком в первом кадре, флеш размером 1х1.

<object id="soundflash" style="position:absolute; z-index:-10" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="1" height="1"><param name=movie value="ссылка к swf"><param name=quality value=high><embed src="ссылка к swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1" height="1"></embed></object>

<label><input type="checkbox" id="sound">Саунд</label>

<script>
document.getElementById('sound').onclick = function()
{
document.getElementById('soundflash').style.display='block';
setTimeout(function()
{
document.getElementById('soundflash').style.display='none';
},1000)
}
</script>


Зато во всех браузерах работать будет :D

estet-osa 25.07.2012 21:48

Русик, у меня не работает ни в хроме ни в опере:(

ruslan_mart 25.07.2012 21:52

estet-osa, хостинг uCoz? :)

estet-osa 25.07.2012 22:59

yutex оченьно мне нравится он

ruslan_mart 26.07.2012 06:11

estet-osa, вот, должно работать:

<div id="soundflash" style="position:absolute; z-index:-10; display:none"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="1" height="1"><param name=movie value="ссылка к swf"><param name=quality value=high><embed src="ссылка к swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1" height="1"></embed></object></div>

<label><input type="checkbox" onclick="sound()">Саунд</label>
 
<script>
function sound()
{
document.getElementById('soundflash').style.display='block'; 
setTimeout(function() 
{ 
document.getElementById('soundflash').style.display='none'; 
},1000) 
}
</script>

cyberblade 12.11.2012 04:37

Простите за апп...
Magneto твой пример не работает в сафари... В чем может быть проблема? Использую аналогичный скрипт у себя на сайте - сафари отказывается "петь".

Вот скрипт:
function playsound(sound, mute){

	var myfile;
	var ext = '.ogg';

	if (mute == 1){

		var ua = navigator.userAgent;	
		if (ua.search(/MSIE/) > 0){ext = '.mp3'}
		if (ua.search(/Chrome/) > 0){ext = '.mp3'}
		if (ua.search(/Safari/) > 0){ext = '.mp3';}
		
		if (sound == 1){myfile = 'sound/msg'+ext;}
		if (sound == 2){myfile = 'sound/turn'+ext;}
		if (sound == 3){myfile = 'sound/expand'+ext;}
		if (sound == 4){myfile = 'sound/error'+ext;}

		var audio = new Audio();
			audio.src = myfile;
			audio.load();
			audio.play();
	}
}

Magneto 12.11.2012 11:38

Возможно нужно установить Apple QuickTime.


Часовой пояс GMT +3, время: 14:51.