Различные способа воспроизведения звука. Different Ways to Play a Sound from a Web Page

Многие скажут, что звук на сайте в наши дни это моветон.
Но бывают случаи, когда стоит весьма конкретная задача, которую приходится решать. Воспроизведение звука по событию типа mouseover и т.д. без установки доп. плагинов клиентом.

Вот оригинальная ссылка: www.phon.ucl.ac.uk/home/mark/audio/play9.htm

Из всех предложенных авторами вариантов, мне этот показался наиболее оптимальным с точки зрения кроссбраузерности и большой вероятности наличия у клиента уже установленного флеша.

Скопировал себе source code, но сами ссылки так и не заработали.
Помогите, пожалуйста разобраться с этим или предложите вариант замены, например мп3 и т.д. И так сутки насмарку.
Пиво, ништяки, неокубик.

38 комментариев

Можешь подробнее раскрыть стоящую перед тобой задачу и дать ссылку на свой неработающий код?
При наведении на картинку нужен звуковой эффект, только чтобы без доп. установки всяких плагинов. Сcылку отправил лично.
без установки плагинов — значит и без флэша тоже?
Честно говоря, есть ощущение путаницы жопы с пальцем. Какие плагины вы имеете в виду? JavaScript плагины? А что в них плохого? Если же сторонние плагины не встроенные в браузер, то по сути до HTML5 у браузеров такой возможности и не было. Да и с его приходм есть не у всех браузеров. Так что лучше уточнить формулировку.
А что хорошего в том, что когда пользователь заходит на сайт, то он видит не сам сайт во всей его красе, а что-то типа «Установите следующие компоненты...» или «Для просмотра содержимого вам нужен ActiveX...» или «Броузер заблокировал содержимое по причине отсутствия...» Ну что-то в этом роде.
Я спросил про javascript-плагины. В реальности это обыкновенные js библиотеки. Тех трагических последствий, о которых вы пишете они не вызывают. А вот сторонние плагины (о которых вы как раз пишете) действительно требуют установки. Но здесь есть ряд НО. Ряд этих плагинов уже есть у каждого де-факто, вот и вы приводите под маской «безплагинного» вполне себе «плагинный» код, просто он полагается на то, что де факто есть у большинства.
Да, Вы правы. Альтернативы пока никто не предложил.
Выбранное тобой решение использует флэш-плагин, который, как известно, есть не у всех, а у многих из тех: у кого есть — блокируется всяческими flashblock'ами. Текущая реализация не позволит пользователям, включающим флэш по желанию, сделать это у тебя. Вероятно, над как-то отлавливать эту штуку и предлагать им удобный вариант включения.

Кроме того, в демке используется файл формата .wav, лучше заменить его на значительно более компактный .mp3
Большая ставка на то, что большинство пользователей пользуются соц. сетями. В наше время практически 90% этих людей, если не все 100%, смотрят там медиа данные, что само собой подразумевает наличие Flash.
А так, Кэп, если посмотреть на мой пост, последний абзац, то я там тоже поднимал вопрос об мп3 и любых альтернативных методах.
То, что мне здесь подсказали, я доГуглил и реализовал в коде. Подскажите точнее, в каком направлении копать — я буду пробовать.
Отсутствие флэша не мешает слушать музыку ВКонтакте и смотреть видео на ютубе, современым браузерам для этого не нужны сторонние плагины.

Не понимаю, что значит «Кэп», но уточню, что использование мп3-файла в данном случае — это никакой не альтернативный метод. Просто замени файл одного типа другим и всё продолжит работать.
Блин, реально не знал. У меня раньше без Adobe Flash Plugin ничего не работало.
а wav у меня по 15 кб. Куда уж компактней. Но совет приму во внимание.
Оказывается, проблема в моём браузере была, побитый он, кажется, или глючит его.
На другом ноуте все работает и в
Опера 11.10 и в
Mozilla 3.6.18
только IE 7 зависает на открытии страницы.
Может кто-нибудь придумает мне вариант с проверкой на ИЕ и чтобы другая любая процедура подключалась? из тех же примеров www.phon.ucl.ac.uk/home/mark/audio/?
Победа. Кроссбраузерность. Коряво, конечно, но работает.
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="//www.w3.org/1999/xhtml" xml:lang="en">
 
<head>
  <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
  <link rel="stylesheet" type="text/css" href="//www.phon.ucl.ac.uk/design/shaps-layout.css" title="Phonetics Stylesheet" />
 
 
  <title>Different ways to play sounds from a web page - UCL</title>
 <!--[if  IE]>  
  <script type="text/javascript">
	function doPlay(url) {
	  document.all.sound.src = url;
	}
  </script>
 <![endif]-->

 <!--[if IE]><![if !IE]><![endif]-->
    <script type="text/javascript">

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>
 <!--[if IE]><![endif]><![endif]-->
 
</head>
 
<body>
<bgsound id="sound">
 <!--[if IE]><![if !IE]><![endif]-->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"

	width="40"

	height="40"

	id="audio1"

	align="middle">

	<embed src="wavplayer.swf?gui=none&h=20&w=300&sound=success.wav&"

	   bgcolor="#ffffff"

	   width="40"

	   height="40"

	   allowScriptAccess="always"

	   type="application/x-shockwave-flash"

	   pluginspage="//www.macromedia.com/go/getflashplayer"

	/>

</object> 
<!--[if IE]><![endif]><![endif]-->
<a href="#" onMouseOver="doPlay('success.wav')">Move mouse here</A>

</body>
</html>
в кандишнл комментс бросается в глаза ненужная избыточность
По-русски?)
в условных комментариях…
Я не в этом смысле. Просто это такая «хитрая» конструкция, позволяющая исключить ненужный код для IE, из-за которого он вис тупо.
Тут новая задача возникла походу пляски. Усложним:
надо сделать так, чтобы и при нажатии на ссылку проигрывался коротенький звук, с осуществлением перехода по ссылке (после 1 сек задержки для доигрывания звука — это самый простой вариант, как я вижу) при условии сохранения рабочего атрибута href у тега а на случай войны отключенного JS у пользователя. 
<script type="text/javascript">

setTimeout('location.replace("//www.tigir.com")', 3000);
/*Изменить текущий адрес страницы через 3 секунды (3000 миллисекунд)*/

</script>
ну конечно же это загони в функцию
Не подскажите, надеюсь, последний вопрос, как сделать, чтобы не отменялось выполнение функции по OnClick, как в примере ниже событием OnMouseOut? А то файл перестает проигрываться, хотя по OnMouseOut doPlay не вызывается.
Буду очень признателен.
Ой, ой. Это я туплю совсем. Пора спать мне.
Шутите… Ну смейтесь. Эх, опять придется все самому:

function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}

<a href="#" onclick="doPlay('click.wav');setTimeout(function() {MM_goToURL('parent','//www.ngs.ru')},5000);return document.MM_returnValue" onMouseOver="doPlay('success.wav')">

Вопрос с
при условии сохранения рабочего атрибута href у тега а на случай войны отключенного JS у пользователя.

пока остается. Придется что ли 
<script><noscript>
использовать…
А что не так с атрибутом href? Суём туда ссылку, по онклик запускается звук, если js отключен — просто переходим по ссылке без звука. Возможно, я снова не понял, какая стоит задача
Если поставить в href существующий адрес, то он сработает быстрее чем onclick и его setTimeout
А если подучить азбуку js, то можно узнать, что события по умолчанию, например переход по ссылке, можно отменять.
Cnacu60 за совет. Дело в том, что мои познания в JS все возрастом в три дня и близки к «0». Хотел воспользоваться тэгом Noscript, плохо? 
return false
вконце добавте
в конце чего, я не понял?
скрипта
какого?
а, ВСЕ ПОНЯЛ. Спасибо.
Anywhere you put an onclick event with a javascript call, if you add return false then the default behavior (what would have happened without the onclick event) will be disregarded.
Не подскажите, как сделать проверку в функции doStop, прежде чем она сработает, играется ли файл с определенным имененем, и если да, тогда пропустить ее действие.
doStop вызывается через OnMouseOut.
Хотите чтобы играла неземная музыка?

Чтобы оставлять комментарии, нужно или зарегистрироваться.