Конечно можно. 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>
|
Спасибо большое, всё просто оказалось:)
|
| Часовой пояс GMT +3, время: 15:30. |