|
Как сделать кнопку включить/выключить со звуком
Уважаемые спецы подскажите пожалуйста!
как сделать кнопку включить/выключить со звуком : нажал кнопку - играет мелодия, цвет кнопки изменился , нажал ту же кнопку - пауза той же мелодии или 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>
|
Вот как-то так:
<!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>
Песочница |
Большое спасибо Erolast!
Оно! С Рождеством! |
Подскажите еще одну штуку:
как зациклить мелодию в этом скрипте, чтобы не останавливался звук? |
Прописать атрибут 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>
|
|
Я понял понял!
Спасибо большое. |
Erolast
Подскажите еще одно пожалуйста: как громкость отрегулировать, элемент volume="" в теге audio почему то не работает? <audio id="myaudio" volume="70" loop> хотелось бы чтобы мелодия запускалась с определенной громкостью |
Гугл, гугл всемогущий! 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>
|
Немного не так, задача такая:
Возможно ли запускать кнопку с определенным уровнем громкости звука, естественно без отображения ползунка с регулировкой!? не много не уверен что это вообще можно сделать, по этому и спрашиваю спецов! Вы уж простите!=) |
| Часовой пояс GMT +3, время: 14:54. |
|