Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.01.2014, 23:02
Интересующийся
Отправить личное сообщение для Scheme Посмотреть профиль Найти все сообщения от Scheme
 
Регистрация: 06.01.2014
Сообщений: 22

Как сделать кнопку включить/выключить со звуком
Уважаемые спецы подскажите пожалуйста!
как сделать кнопку включить/выключить со звуком : нажал кнопку - играет мелодия, цвет кнопки изменился , нажал ту же кнопку - пауза той же мелодии или 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>
Ответить с цитированием
  #2 (permalink)  
Старый 07.01.2014, 10:29
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

Вот как-то так:
<!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>

Песочница
Ответить с цитированием
  #3 (permalink)  
Старый 07.01.2014, 13:40
Интересующийся
Отправить личное сообщение для Scheme Посмотреть профиль Найти все сообщения от Scheme
 
Регистрация: 06.01.2014
Сообщений: 22

Большое спасибо Erolast!
Оно!
С Рождеством!
Ответить с цитированием
  #4 (permalink)  
Старый 07.01.2014, 18:02
Интересующийся
Отправить личное сообщение для Scheme Посмотреть профиль Найти все сообщения от Scheme
 
Регистрация: 06.01.2014
Сообщений: 22

Подскажите еще одну штуку:
как зациклить мелодию в этом скрипте, чтобы не останавливался звук?
Ответить с цитированием
  #5 (permalink)  
Старый 07.01.2014, 18:49
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

Прописать атрибут 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Scheme,
http://htmlbook.ru/html/audio/loop
Ответить с цитированием
  #7 (permalink)  
Старый 07.01.2014, 19:00
Интересующийся
Отправить личное сообщение для Scheme Посмотреть профиль Найти все сообщения от Scheme
 
Регистрация: 06.01.2014
Сообщений: 22

Я понял понял!
Спасибо большое.
Ответить с цитированием
  #8 (permalink)  
Старый 07.01.2014, 23:02
Интересующийся
Отправить личное сообщение для Scheme Посмотреть профиль Найти все сообщения от Scheme
 
Регистрация: 06.01.2014
Сообщений: 22

Erolast
Подскажите еще одно пожалуйста:
как громкость отрегулировать, элемент volume="" в теге audio почему то не работает?
<audio id="myaudio" volume="70" loop>
хотелось бы чтобы мелодия запускалась с определенной громкостью
Ответить с цитированием
  #9 (permalink)  
Старый 08.01.2014, 07:48
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

Гугл, гугл всемогущий! 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>

Последний раз редактировалось Erolast, 08.01.2014 в 07:54.
Ответить с цитированием
  #10 (permalink)  
Старый 08.01.2014, 13:16
Интересующийся
Отправить личное сообщение для Scheme Посмотреть профиль Найти все сообщения от Scheme
 
Регистрация: 06.01.2014
Сообщений: 22

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать такую фичу? dotwatt Элементы интерфейса 7 20.07.2012 10:51
Как сделать кнопку, запускающую rrdtool jsx Общие вопросы Javascript 2 20.02.2011 13:40
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 09:06
Как сделать кнопку очистить? sss2019 Общие вопросы Javascript 10 10.10.2010 14:56
Как сделать? При выходе мышкой за пределы окна браузера, начинает грузится другая стр alb Events/DOM/Window 13 01.09.2010 12:19