Jump to content
  • Sign Up
Sign in to follow this  
jjhollywood37

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

Recommended Posts

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

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

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

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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

<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 by Arinden

Share this post


Link to post
Share on other sites

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

<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() не нужно цель указывать?

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

 

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

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

 

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

 

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Similar Content

    • By Vic-Tor
      Всем привет!
      Может кто помочь, всунуть языковую кнопку на сайт. Сайт делал из шаблона, в html соображаю не очень сильно.
      Я так понимаю, можно сделать типа поддомен для другого языка или как проще?  Сайт ТУТ.
      Спасибо!
    • By Agony741
      Всем привет! Есть такая кнопка:



      Не понимаю, как сделать внизу такую темную линию, или через какое свойство достигается "такое" - не знаю как назвать даже. 
      Подскажите пожалуйста, как это сделать ?
    • By garmoni
      Нашла анимацию гамбургер меню из трех полосок в крестик. Не могу понять как к нему прикрепить появление самого меню при нажатии.
      <nav class="nav"> <div class="nav__btn"> <a id="nav-toggle" href="#"><span></span> </a> </div> <ul class="nav__list"> <li> <a href="#" class="nav__link">Episodes</a> </li> <li> <a href="#" class="nav__link">Characters</a> </li> <li> <a href="#" class="nav__link">Park</a> </li> <li> <a href="#" class="nav__link">Gallery</a> </li> <li> <a href="#" class="nav__link">actors</a> </li> </ul> </nav> $(document).ready(function(){ $('#nav-toggle').click(function(){ $(this).toggleClass('active'); }); .nav__list { display: none; } #nav-toggle {position: relative; display: inline-block; width:42px; height:25px;} #nav-toggle span { position: absolute; left: 0; top: 10px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { position: absolute; display: block; content: ''; height: 5px; width: 42px; background: #000; border-radius: 2px; cursor: pointer; } #nav-toggle span:before { top: -10px; } #nav-toggle span:after { bottom: -10px; } /* Добавим анимацию всех свойств для блоков нашей иконки */ #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 500ms ease-in-out; } /* Центральный блок делаем прозрачным */ #nav-toggle.active span { background-color: transparent; } /* Смещаем псевдо-элементы в центр иконки (на место основного блока) */ #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } /* Наклоняем псевдо-элементы под углом 45 градусов, но в разные стороны */ #nav-toggle.active span:before { transform: rotate(45deg); } #nav-toggle.active span:after { transform: rotate(-45deg); }  
  • Member Statistics

    46,837
    Total Members
    1,451
    Most Online
    HARDSOFT
    Newest Member
    HARDSOFT
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...