Как реализовать кнопку mute?

[jjhollywood37]

Как реализовать кнопку mute?

добавил фоновый звук на страницу  

<embed src="http://www.podst.r/user_files/2/3800/snow_wind_128.MP3" hidden="true"></embed>

хочу сделать отдельную кнопку для включение выключение звука на странице.. для вместо <button> использую обычный рисунок (с hover в стиле), а вот как задать команду для остановки аудио не знаю.. Уважаемые форумчане, помогите нубу

 

[Arinden]

Для <embed> элемента нет атрибута mute. Для того, чтобы контролировать аудио на странице - необходимо использовать новый элемент <audio>, но он имеет ограниченную поддержку браузерами. Либо использовать проприетарные плагины.

[jjhollywood37]

Для <embed> элемента нет атрибута mute. Для того, чтобы контролировать аудио на странице - необходимо использовать новый элемент <audio>, но он имеет ограниченную поддержку браузерами. Либо использовать проприетарные плагины.

можно чуть-чуть точнее? как с помощью audio это осуществить

[Arinden]

Я написал вот такой код, вот пример его работы. А вот сам код:

<audio id="melody" autoplay>  <source src="1.ogg" type="audio/ogg">  <source src="1.mp3" type="audio/mpeg">  Ваш браузер не поддерживает элемент audio.</audio><img id="imgOnOff" src="on.jpg" alt="Вкл/выкл звук" onclick="Mute()"><script>myVid=document.getElementById("melody");imgOnOff=document.getElementById("imgOnOff");var x = 0;function Mute()  {	if (x==0) {		myVid.muted=true;		imgOnOff.src='off.jpg';		x=1;	}	else {		myVid.muted=false;		imgOnOff.src='on.jpg';		x=0;		}  }</script>

В элементе <audio> для атрибута src указываем ссылку на аудио файл в формате .mp3 и .ogg (для FireFox и Opera).

В элементе <img> для атрибута src указываем ссылку на изображение включённого динамика.

В скрипте для imgOnOff.src='off.jpg'; указываем изображение выключенного динамика, а в imgOnOff.src='on.jpg'; дублируем изображение включённого динамика.

Edited November 14, 2013 by Arinden

[jjhollywood37]

Я написал вот такой код, вот пример его работы. А вот сам код:

<audio id="melody" autoplay>  <source src="1.ogg" type="audio/ogg">  <source src="1.mp3" type="audio/mpeg">  Ваш браузер не поддерживает элемент audio.</audio><img id="imgOnOff" src="on.jpg" alt="Вкл/выкл звук" onclick="Mute()"><script>myVid=document.getElementById("melody");imgOnOff=document.getElementById("imgOnOff");var x = 0;function Mute()  {	if (x==0) {		myVid.muted=true;		imgOnOff.src='off.jpg';		x=1;	}	else {		myVid.muted=false;		imgOnOff.src='on.jpg';		x=0;		}  }</script>

В элементе <audio> для атрибута src указываем ссылку на аудио файл в формате .mp3 и .ogg (для FireFox и Opera).

В элементе <img> для атрибута src указываем ссылку на изображение включённого динамика.

В скрипте для imgOnOff.src='off.jpg'; указываем изображение выключенного динамика, а в imgOnOff.src='on.jpg'; дублируем изображение включённого динамика.

Спасибо,но к сожалению не работает.. при клике на картинку ничего не происходит.. в Mute() не нужно цель указывать?

[mishka]

Должно работать. Все айди указали?

также можно обойтись без лишней переменной:
 

function Mute() {	if (myVid.muted) {		myVid.muted = false;		imgOnOff.src = 'on.jpg';	} else {		myVid.muted = true;		imgOnOff.src = 'off.jpg';	}}

[jjhollywood37]

 

Должно работать. Все айди указали?

также можно обойтись без лишней переменной:

 

function Mute() {	if (myVid.muted) {		myVid.muted = false;		imgOnOff.src = 'on.jpg';	} else {		myVid.muted = true;		imgOnOff.src = 'off.jpg';	}}

перепроверил.. не работает.

[Arinden]

Вот ссылка на архив, внутри index.html с вышеуказанным кодом, 1.mp3, 1.ogg, on.png, off.png.

[jjhollywood37]

Вот ссылка на архив, внутри index.html с вышеуказанным кодом, 1.mp3, 1.ogg, on.png, off.png.

Спасибо большое! все работает)) я разобрался.. скрип заработал когда я его разместил непосредственно в div с аудио! не знаю в чем могло быть дело! при размещении в head'е он почему то не работал..

[Arinden]

Спасибо большое! все работает)) я разобрался.. скрип заработал когда я его разместил непосредственно в div с аудио! не знаю в чем могло быть дело! при размещении в head'е он почему то не работал..

 

Не за что. Если Вам необходимо управлять содержимым, то скрипт следует размещать после содержимого. Поэтому часто можно наблюдать <script> в конце <body>. Возможно, можно по другому.