Форум

Scheme · #1 (**permalink**) 06.01.2014, 23:02

Уважаемые спецы подскажите пожалуйста!
как сделать кнопку включить/выключить со звуком : нажал кнопку - играет мелодия, цвет кнопки изменился , нажал ту же кнопку - пауза той же мелодии или stop цвет кнопки изначальный .
Вот что есть, к этому нужно приделать выключение звука мелодии или паузу, помогите прошу вас!:

<a href="#" onclick="document.getElementById('audio').play();" style="margin: 121 0 0 860; position: absolute;" title=""><img src="images1.png" onclick="imgchange()" id="myimg" /> </a>

<audio id="audio" src="мелодия.mp3"></audio>

<script type="text/javascript"> 
var flag=false; 
function imgchange(){ 
 if (flag) 
 document.all.myimg.src = "images1.png"; 
 else 
 document.all.myimg.src = "images2.png"; 
 flag=!flag; 
} 
</script>

Erolast · #2 (**permalink**) 07.01.2014, 10:29

Вот как-то так:

<!DOCTYPE HTML>
<html>
<head>
  
</head>
  
<body>
  <button id="mybtn" type="button" style="background-color: white">Траляля</button>
<audio id="myaudio">
  <source src="http://upload.wikimedia.org/wikipedia/commons/5/59/C_major_scale.ogg" type="audio/ogg; codecs=vorbis" />  
</audio>
  
<script>
  /*Вешаем обработчик события на кнопку с идентификатором mybtn. Скрипт обязательно должен стоять
  после кнопки, т.к. скрипты выполняются сразу при своей загрузке, и если он выполнится раньше
  загрузки кнопки - он просто ее не увидит.*/
	document.getElementById("mybtn").onclick = function()
    {
      var myaudio = document.getElementById("myaudio");
      if(myaudio.paused == true)
      {
        document.getElementById("myaudio").play();
        this.style.backgroundColor = "Blue"; //Цвет кнопки можно изменить напрямую, без всяких картинок.
        this.style.color = "White"; //Заодно меняем цвет текста для удобичитаемости
        //this здесь является самой кнопкой, так как функция является дочерней кнопке
      }
      else if (myaudio.paused == false)
      {
        document.getElementById("myaudio").pause();
        this.style.backgroundColor = "White";
        this.style.color = "Black";
      }
    }
</script>
</body>
</html>

Песочница

Scheme · #3 (**permalink**) 07.01.2014, 13:40

Большое спасибо Erolast!
Оно!
С Рождеством!

Scheme · #4 (**permalink**) 07.01.2014, 18:02

Подскажите еще одну штуку:
как зациклить мелодию в этом скрипте, чтобы не останавливался звук?

Erolast · #5 (**permalink**) 07.01.2014, 18:49

Прописать атрибут loop тегу audio.

<!DOCTYPE HTML>
<html>
<head>
   
</head>
   
<body>
  <button id="mybtn" type="button" style="background-color: white">Траляля</button>
<audio id="myaudio" loop>
  <source src="http://upload.wikimedia.org/wikipedia/commons/5/59/C_major_scale.ogg" type="audio/ogg; codecs=vorbis" /> 
</audio>
   
<script>
  /*Вешаем обработчик события на кнопку с идентификатором mybtn. Скрипт обязательно должен стоять
  после кнопки, т.к. скрипты выполняются сразу при своей загрузке, и если он выполнится раньше
  загрузки кнопки - он просто ее не увидит.*/
    document.getElementById("mybtn").onclick = function()
    {
      var myaudio = document.getElementById("myaudio");
      if(myaudio.paused == true)
      {
        document.getElementById("myaudio").play();
        this.style.backgroundColor = "Blue"; //Цвет кнопки можно изменить напрямую, без всяких картинок.
        this.style.color = "White"; //Заодно меняем цвет текста для удобичитаемости
        //this здесь является самой кнопкой, так как функция является дочерней кнопке
      }
      else if (myaudio.paused == false)
      {
        document.getElementById("myaudio").pause();
        this.style.backgroundColor = "White";
        this.style.color = "Black";
      }
    }
</script>
</body>
</html>

рони · #6 (**permalink**) 07.01.2014, 18:51

Scheme,
http://htmlbook.ru/html/audio/loop

Scheme · #7 (**permalink**) 07.01.2014, 19:00

Я понял понял!
Спасибо большое.

Scheme · #8 (**permalink**) 07.01.2014, 23:02

Erolast
Подскажите еще одно пожалуйста:
как громкость отрегулировать, элемент volume="" в теге audio почему то не работает?
<audio id="myaudio" volume="70" loop>
хотелось бы чтобы мелодия запускалась с определенной громкостью

Erolast · #9 (**permalink**) 08.01.2014, 07:48

Гугл, гугл всемогущий! Volume регулируется в пределах от 0 до 1.

<!DOCTYPE HTML>
<html>
<head>
    
</head>
    
<body>
  <button id="mybtn" type="button" style="background-color: white">Траляля</button>
<input type="range" min="0" max="100" value="50" id="volume_range" oninput="document.getElementById('myaudio').volume = this.value/100" onchange="this.oninput()">
<audio id="myaudio" loop>
  <source src="http://upload.wikimedia.org/wikipedia/commons/5/59/C_major_scale.ogg" type="audio/ogg; codecs=vorbis" />
</audio>

    
<script>
  /*Вешаем обработчик события на кнопку с идентификатором mybtn. Скрипт обязательно должен стоять
  после кнопки, т.к. скрипты выполняются сразу при своей загрузке, и если он выполнится раньше
  загрузки кнопки - он просто ее не увидит.*/
    document.getElementById("mybtn").onclick = function()
    {
      var myaudio = document.getElementById("myaudio");
      if(myaudio.paused == true)
      {
        document.getElementById("myaudio").play();
        this.style.backgroundColor = "Blue"; //Цвет кнопки можно изменить напрямую, без всяких картинок.
        this.style.color = "White"; //Заодно меняем цвет текста для удобичитаемости
        //this здесь является самой кнопкой, так как функция является дочерней кнопке
      }
      else if (myaudio.paused == false)
      {
        document.getElementById("myaudio").pause();
        this.style.backgroundColor = "White";
        this.style.color = "Black";
      }
    }
</script>
</body>
</html>

Scheme · #10 (**permalink**) 08.01.2014, 13:16

Немного не так, задача такая:
Возможно ли запускать кнопку с определенным уровнем громкости звука, естественно без отображения ползунка с регулировкой!?

не много не уверен что это вообще можно сделать, по этому и спрашиваю спецов! Вы уж простите!=)

Форум

Справочник

Discord чат

Курсы javascript