Как сделать кнопку включить/выключить со звуком
Уважаемые спецы подскажите пожалуйста!
как сделать кнопку включить/выключить со звуком : нажал кнопку - играет мелодия, цвет кнопки изменился , нажал ту же кнопку - пауза той же мелодии или 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>
|
Немного не так, задача такая:
Возможно ли запускать кнопку с определенным уровнем громкости звука, естественно без отображения ползунка с регулировкой!? не много не уверен что это вообще можно сделать, по этому и спрашиваю спецов! Вы уж простите!=) |
Конечно можно. document.getElementById("myaudio").volume = "0.5", значение должно быть от нуля до единицы.
<!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").volume = "0.5";
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, Зачем ты записываешь элемент в переменную, но при этом все равно каждый раз обращаешься к нему через getElementById? :)
|
Цитата:
Цитата:
|
var snowStorm = null;
function SnowStorm() {
imageDir = "/snow/";
sflakesMax = 15;
sflakesMaxActive = 65;
svMaxX = 2;
svMaxY = 6;
ssnowStick = 1;
ssnowCollect = 0;
sfollowMouse = 1;
sflakeBottom = 0;
susePNG = 1;
sflakeTypes = 5;
sflakeWidth = 15;
sflakeHeight = 15;
// PROPERTIES
// ------------------
var imagePath = imageDir ? imageDir : '/snow/'; // relative path to snow images (including trailing slash)
var flakesMax = sflakesMax ? sflakesMax : 32;
var flakesMaxActive = sflakesMaxActive ? sflakesMaxActive : 32;
var vMaxX = svMaxX ? svMaxX : 2;
var vMaxY = svMaxY ? svMaxY : 3;
var usePNG = susePNG ? susePNG : true;
var flakeBottom = sflakeBottom ? sflakeBottom : null; // Integer for fixed bottom, 0 or null for "full-screen" snow effect
var snowStick = ssnowStick ? true : false;
var snowCollect = ssnowCollect ? ssnowCollect : false;
var targetElement = null; // element which snow will be appended to (document body if undefined)
var followMouse = sfollowMouse ? sfollowMouse : false;
var flakeTypes = sflakeTypes ? sflakeTypes : 5;
var flakeWidth = sflakeWidth ? sflakeWidth : 15;
var flakeHeight = sflakeHeight ? sflakeHeight : 15;
// ------------------
var zIndex = 999; // CSS stacking order applied to each snowflake
var flakeLeftOffset = flakeWidth; // amount to subtract from edges of container
var flakeRightOffset = flakeWidth; // amount to subtract from edges of container
// --- End of user section ---
var addEvent = function(o, evtName, evtHandler) {
typeof(attachEvent) == 'undefined' ? o.addEventListener(evtName, evtHandler, false): o.attachEvent('on' + evtName, evtHandler);
}
var removeEvent = function(o, evtName, evtHandler) {
typeof(attachEvent) == 'undefined' ? o.removeEventListener(evtName, evtHandler, false): o.detachEvent('on' + evtName, evtHandler);
}
var classContains = function(o, cStr) {
return(typeof(o.className) != 'undefined' ? o.className.indexOf(cStr) + 1 : false);
}
var s = this;
var storm = this;
this.timers = [];
this.flakes = [];
this.disabled = false;
this.terrain = [];
this.active = false;
var isIE = navigator.userAgent.match(/msie/i);
var isIE6 = navigator.userAgent.match(/msie 6/i);
var isOldIE = (isIE && (isIE6 || navigator.userAgent.match(/msie 5/i)));
var isWin9X = navigator.appVersion.match(/windows 98/i);
var isiPhone = navigator.userAgent.match(/iphone/i);
var isBackCompatIE = (isIE && document.compatMode == 'BackCompat');
var isOpera = navigator.userAgent.match(/opera/i);
if(isOpera) isIE = false; // Opera (which may be sneaky, pretending to be IE by default)
var noFixed = (isBackCompatIE || isIE6 || isiPhone);
var screenX = null;
var screenX2 = null;
var screenY = null;
var scrollY = null;
var vRndX = null;
var vRndY = null;
var windOffset = 1;
var windMultiplier = 2;
var pngSupported = (!isIE || (isIE && !isIE6 && !isOldIE)); // IE <7 doesn't do PNG nicely without crap filters
var docFrag = document.createDocumentFragment();
this.oControl = null; // toggle element
if(flakeLeftOffset == null) flakeLeftOffset = 0;
if(flakeRightOffset == null) flakeRightOffset = 0;
function rnd(n, min) {
if(isNaN(min)) min = 0;
return(Math.random() * n) + min;
}
this.randomizeWind = function() {
vRndX = plusMinus(rnd(vMaxX, 0.2));
vRndY = rnd(vMaxY, 0.2);
if(this.flakes) {
for(var i = 0; i < this.flakes.length; i++) {
if(this.flakes[i].active) this.flakes[i].setVelocities();
}
}
}
/* часть вырезал потому как можно только до 10000 символов((( */
this.animate = function() {
// main animation loop
// move, check status, die etc.
s.move();
}
this.setVelocities = function() {
s.vX = vRndX + rnd(vMaxX * 0.12, 0.1);
s.vY = vRndY + rnd(vMaxY * 0.12, 0.1);
}
this.recycle = function() {
s.o.style.display = 'none';
s.o.style.position = 'absolute';
s.o.style.bottom = 'auto';
s.setVelocities();
s.vCheck();
s.x = parseInt(rnd(screenX - flakeWidth - 20));
s.y = parseInt(rnd(screenY) * -1) - flakeHeight;
s.o.style.left = s.x + 'px';
s.o.style.top = s.y + 'px';
s.o.style.display = 'block';
s.active = 1;
}
this.recycle(); // set up x/y coords etc.
this.refresh();
}
this.snow = function() {
var active = 0;
var used = 0;
var waiting = 0;
for(var i = s.flakes.length; i--;) {
if(s.flakes[i].active == 1) {
s.flakes[i].move();
active++;
} else if(s.flakes[i].active == 0) {
used++;
} else {
waiting++;
}
}
if(snowCollect && !waiting) { // !active && !waiting
// create another batch of snow
s.createSnow(flakesMaxActive, true);
}
if(active < flakesMaxActive) {
with(s.flakes[parseInt(rnd(s.flakes.length))]) {
if(!snowCollect && active == 0) {
recycle();
} else if(active == -1) {
active = 1;
}
}
}
}
this.mouseMove = function(e) {
if(!followMouse) return true;
var x = parseInt(e.clientX);
if(x < screenX2) {
windOffset = -windMultiplier + (x / screenX2 * windMultiplier);
} else {
x -= screenX2;
windOffset = (x / screenX2) * windMultiplier;
}
}
this.createSnow = function(limit, allowInactive) {
for(var i = 0; i < limit; i++) {
s.flakes[s.flakes.length] = new s.SnowFlake(s, parseInt(rnd(flakeTypes)));
if(allowInactive || i > flakesMaxActive) s.flakes[s.flakes.length - 1].active = -1;
}
targetElement.appendChild(docFrag);
}
this.timerInit = function() {
s.timers = (!isWin9X ? [setInterval(s.snow, 20)] : [setInterval(s.snow, 75), setInterval(s.snow, 25)]);
}
this.init = function() {
for(var i = 0; i < 2048; i++) {
s.terrain[i] = 0;
}
s.randomizeWind();
s.createSnow(snowCollect ? flakesMaxActive : flakesMaxActive * 2); // create initial batch
addEvent(window, 'resize', s.resizeHandler);
addEvent(window, 'scroll', s.scrollHandler);
if(!isIE) {
addEvent(window, 'blur', s.freeze);
addEvent(window, 'focus', s.resume);
}
s.resizeHandler();
s.scrollHandler();
if(followMouse) {
addEvent(document, 'mousemove', s.mouseMove);
}
s.timerInit();
}
var didInit = false;
this.start = function(bFromOnLoad) {
if(!didInit) {
didInit = true;
} else if(bFromOnLoad) {
// already loaded and running
return true;
}
if(typeof targetElement == 'string') {
targetElement = document.getElementById(targetElement);
if(!targetElement) throw new Error('Snowstorm: Unable to get targetElement');
}
if(!targetElement) {
targetElement = (!isIE ? (document.documentElement ? document.documentElement : document.body) : document.body);
}
if(targetElement != document.documentElement && targetElement != document.body) s.resizeHandler = s.resizeHandlerAlt; // re-map handler to get element instead of screen dimensions
s.resizeHandler(); // get bounding box elements
if(screenX && screenY && !s.disabled) {
s.init();
s.active = true;
}
}
if(document.addEventListener) {
// safari 3.0.4 doesn't do DOMContentLoaded, maybe others - use a fallback to be safe.
document.addEventListener('DOMContentLoaded', function() {
s.start(true)
}, false);
window.addEventListener('load', function() {
s.start(true)
}, false);
} else {
addEvent(window, 'load', function() {
s.start(true)
});
}
}
snowStorm = new SnowStorm();
|
На страницу добавь
<audio id="song" loop> <!-- Естественно, замени на свой трек. Для кроссбраузерности должно быть два источника: в vorbis (ogg) и в mp3. --> <source src="http://upload.wikimedia.org/wikipedia/commons/5/59/C_major_scale.ogg" type="audio/ogg; codecs=vorbis" /> </audio> А в конец метода start
document.getElementById("song").play();
|
Здравствуйте!
Никаким программированием никогда не занимался, и лишь для этого стал осваивать html и css. В принципе успешно, а вот с JavaScript возникли сложности. Для решения нижеприведенного вопроса перерыл интеренет, в т.ч. и Ваш форум и эту тему. вроде и нашел почти то, что мне нужно но ни чего понять не могу. :( В общем, вопрос следующий: Есть много файлов .html в которых указан путь во внешний файл .js, единый для всех. В одном из файлов .html находятся множество кнопок, при нажатии которых должнен воспроизводиться определенный звуковой файл (каждой кнопке соответствует свой файл). В других .html-файлах находится по одной кнопке. Кнопка выглядит так (пока её внешним видом не занимался): <input type='button' value="sound01.wav" onclick='soundClick()'></input> <input type='button' value="sound02.wav" onclick='soundClick()'></input> . . <input type='button' src="" value="soundN.wav" onclick='soundClick()'></input> Функция пока так (подсмотрел в интернете):
function soundClick() {
var soundway = 'sound01.wav'; // Создаю переменную, которой задаю путь и имя к файлу
var audio = new Audio(); // Создаём новый элемент Audio
audio.src = soundway; // Указываем путь к звуку "клика"
audio.autoplay = true; // Автоматически запускаем
}
Главный вопрос: Как мне сделать так, чтобы путь к файлу задавался в .html-файле, т.е. функция была одна, а не для каждой кнопки отдельно? (Т.е., как я понимаю, мне нужно, чтобы значение переменной "soundway" бралось из файла .html) Я, вроде понял, что <input ...></input> надо поместить в тег <form></form>, но не пойму как и что делать дальше. И дополнительные вопрсы: 1. Что добавить в функцию, чтобы при нажатии кнопки файл воспроизводился бесконечное число раз, а при повторном нажатии на ту же кнопку воспроизведение останавливалось? 2. Что и куда добавить, чтобы при нажатии другой кнопки при воспроизведении одного звука, это воспроизведение останавливалось, и начинолось другое, соответствующие этой кнопке? Очень прошу ответить подробно, для "чайника" в этом деле. |
:write: на заметку
<input type='button' value="sound01.wav" onclick='soundClick(this)'></input>
<input type='button' value="sound02.wav" onclick='soundClick(this)'></input>
<script >
function soundClick(obj) {
var soundway = obj.value; // Создаю переменную, которой задаю путь и имя к файлу
var audio = new Audio(); // Создаём новый элемент Audio
audio.src = soundway; // Указываем путь к звуку "клика"
audio.autoplay = true; // Автоматически запускаем
}
</script>
|
Спасибо большое, всё просто оказалось:)
|
Спасибо всем за помощь!!!
Спасибо всем за помощь!!! САМЫЙ ЛУЧШИЙ САЙТ ДЛЯ ТУСОВКИ ШКОЛЬНИКОВ!!!!! НИ ОДНОГО НОРМАЛЬНОГО ОТВЕТА ТАК И НЕ УСЛЫШАЛ!! ТОЛЬКО КУЧА ПОНТОВ ШКОЛЬНЫХ!!!!!!!
|
Во-первых, закрой клюв, здесь никто тебе ничем не обязан. Во-вторых, не обижай школьников. В-третьих, для кого я, по-твоему, это писал?
Цитата:
|
Большое спасибо за ответ! Но судя по всему вы не поняли вопрос!?!!
Как вашей кнопкой запустить параллельно ещё один скрипт ?? То есть прицепить к ней мой скрипт что бы он запускался и останавливался от вашей кнопки! Большое спасибо!! |
snowStorm = new SnowStorm(); Перенеси в обработчик клика по кнопке. |
Думал, что дальше сам разберусь, но ни как не получается.
Есть кнопки: <button value="sound01.wav" onclick="soundClick(this)">sound01</button> <button value="sound02.wav" onclick="soundClick(this)">sound02</button> Есть скрипт:
function soundClick(obj) {
var soundway = obj.value; //Задаем путь к файлу
var audio = new Audio(); // Создаём новый элемент Audio
audio.src = soundway; // Указываем путь к звуку "клика"
audio.autoplay = true; // Автоматически запускаем
}
При нажатии кнопки начинает проигрываться звуковой файл. Необходимо добиться того, чтобы если не было ни каких повторных нажатий кнопок файл проигрывался бесконечно. При нажатии той же кнопки проигрывание останавливалось, а при нажатии другой кнопки первый файл так же останавливался, а второй начинал проигрываться. Мне кажется, нужно ввести еще одну переменную со значениями true/false: var butt и задать цикл:
while (butt=true){
}
т.е получится:
function soundClick(obj) {
var butt=
var soundway = obj.value; //Задаем путь к файлу
var audio = new Audio(); // Создаём новый элемент Audio
audio.src = soundway; // Указываем путь к звуку "клика"
while (butt=true){
audio.autoplay = true; // Автоматически запускаем
}
}
Вопрос: как задать значение переменной butt , правильно ли я поместил цикл в фунцию? Или вообще все не правильно, и как тогда все это сделать? |
А можно прикрутить фоновый рисунок к <button>? Я вроде как изменила код, но не работает.
document.getElementById("mybtn").onclick = function()
{
var myaudio = document.getElementById("myaudio");
if(myaudio.paused == true)
{
document.getElementById("myaudio").play();
this.style.background = "url(../img/audio.png)";
}
else if (myaudio.paused == false)
{
document.getElementById("myaudio").pause();
this.style.background = "url(../img/no_audio.png)";
}
}
|
Corazon,
может скрипт поставить вниз страницы? |
рони, у меня скрипт в отдельном файле и подключен в html перед самым закрывающим body
|
Corazon,
значит вы что-то не договариваите...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#mybtn{
width: 128px;
height: 128px;
background-image: url(http://s7.hostingkartinok.com/uploads/images/2014/02/b33ecdff35171950f356df80a6a7c3dd.png);
}
</style>
</head>
<body>
<audio id="myaudio" src="http://boobooka.com/wp-content/uploads/2013/01/moneta.mp3" controls></audio>
<button id="mybtn"></button>
<script>
document.getElementById("mybtn").onclick = function()
{
var myaudio = document.getElementById("myaudio");
if(myaudio.paused == true)
{
myaudio.play();
this.style.background = "url(http://gbdou88fr.caduk.ru/images/p93_color-violin-clef-illustration-music-note-circle-33645042.jpg)";
}
else if (myaudio.paused == false)
{
myaudio.pause();
this.style.background = "url(http://s7.hostingkartinok.com/uploads/images/2014/02/b33ecdff35171950f356df80a6a7c3dd.png)";
}
}
</script>
</body>
</html>
|
рони, спасибо, разобралась.
|
рони, а еще вопрос. У меня на странице есть еще и видео. Просто через <video>. Фоновый звук подключен как в примере. Можно ли как-то сделать, чтобы при запуске видео фоновый звук сам отключался и менялась картинка на кнопке на соответствующую. Как только видео останавливается или заканчивается, то звук возобновляется. Это как-то через слушатель событий делается?
|
video and audio event
Corazon,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#mybtn{
width: 128px;
height: 128px;
background-image: url(http://s7.hostingkartinok.com/uploads/images/2014/02/b33ecdff35171950f356df80a6a7c3dd.png);
}
#mybtn.play{
background-image: url(http://gbdou88fr.caduk.ru/images/p93_color-violin-clef-illustration-music-note-circle-33645042.jpg);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var audio = $('#myaudio'), video = $('#myvideo'), btn = $('#mybtn');
function play()
{
audio[0].play();
btn.addClass('play');
}
function pause()
{
audio[0].pause();
btn.removeClass('play');
}
btn.on('click',function(){
$(this).is('.play') ? pause() : play()
})
video.on('ended pause',play)
video.on('play playing',pause)
});
</script>
</head>
<body>
<audio id="myaudio" loop >
<source src="http://www.w3schools.com/Tags/horse.ogg" type="audio/ogg">
<source src="http://www.w3schools.com/Tags/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<button id="mybtn"></button>
<video id="myvideo" width="320" height="176" controls >
<source src="http://www.w3schools.com/Tags/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/Tags/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</body>
</html>
|
рони, спасибо! Все прикрутила, все работает!
|
| Часовой пояс GMT +3, время: 15:32. |