08.01.2014, 13:45
|
 |
Профессор
|
|
Регистрация: 24.09.2013
Сообщений: 1,436
|
|
Конечно можно. 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, 08.01.2014 в 13:48.
|
|
08.01.2014, 16:46
|
|
Интересующийся
|
|
Регистрация: 06.01.2014
Сообщений: 22
|
|
|
Благодарю!
|
|
23.01.2014, 22:22
|
|
Новичок на форуме
|
|
Регистрация: 23.01.2014
Сообщений: 1
|
|
|
Установил на сайте три таких кнопки. Все играет. Подскажите, как сделать так, чтобы во время включения одного плеера, остальные переставали играть. Т.е. исключить возможность играть всем трем плеерам одновременно.
Последний раз редактировалось maximmuss, 26.02.2014 в 21:15.
|
|
06.12.2014, 13:25
|
 |
Профессор
|
|
Регистрация: 30.04.2012
Сообщений: 3,018
|
|
Erolast, Зачем ты записываешь элемент в переменную, но при этом все равно каждый раз обращаешься к нему через getElementById? 
|
|
06.12.2014, 15:37
|
|
Профессор
|
|
Регистрация: 24.09.2013
Сообщений: 1,436
|
|
Сообщение от Ruslan_xDD
|
|
Erolast, Зачем ты записываешь элемент в переменную, но при этом все равно каждый раз обращаешься к нему через getElementById?
|
Не знаю, я почти год назад это писал
|
Цитата:
|
|
Помогите новичку подскажите пожалуйста можно ли эту кнопку прикрутить вот к этому js ???
|
Для начала, отформатируй нормально код. |
|
06.12.2014, 16:21
|
 |
Новичок на форуме
|
|
Регистрация: 06.12.2014
Сообщений: 3
|
|
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();
|
|
06.12.2014, 17:08
|
|
Профессор
|
|
Регистрация: 24.09.2013
Сообщений: 1,436
|
|
На страницу добавь
<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();
Последний раз редактировалось Erolast, 06.12.2014 в 17:11.
|
|
06.12.2014, 20:50
|
|
Новичок на форуме
|
|
Регистрация: 06.12.2014
Сообщений: 3
|
|
Здравствуйте!
Никаким программированием никогда не занимался, и лишь для этого стал осваивать 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. Что и куда добавить, чтобы при нажатии другой кнопки при воспроизведении одного звука, это воспроизведение останавливалось, и начинолось другое, соответствующие этой кнопке?
Очень прошу ответить подробно, для "чайника" в этом деле.
Последний раз редактировалось Alexey_087, 06.12.2014 в 21:03.
Причина: ошибки
|
|
06.12.2014, 21:12
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
 на заметку
<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>
|
|
07.12.2014, 12:56
|
|
Новичок на форуме
|
|
Регистрация: 06.12.2014
Сообщений: 3
|
|
Спасибо большое, всё просто оказалось |
|
|
|
