Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 08.01.2014, 13:45
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 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.
Ответить с цитированием
  #12 (permalink)  
Старый 08.01.2014, 16:46
Интересующийся
Отправить личное сообщение для Scheme Посмотреть профиль Найти все сообщения от Scheme
 
Регистрация: 06.01.2014
Сообщений: 22

Благодарю!
Ответить с цитированием
  #13 (permalink)  
Старый 23.01.2014, 22:22
Новичок на форуме
Отправить личное сообщение для maximmuss Посмотреть профиль Найти все сообщения от maximmuss
 
Регистрация: 23.01.2014
Сообщений: 1

Установил на сайте три таких кнопки. Все играет. Подскажите, как сделать так, чтобы во время включения одного плеера, остальные переставали играть. Т.е. исключить возможность играть всем трем плеерам одновременно.

Последний раз редактировалось maximmuss, 26.02.2014 в 21:15.
Ответить с цитированием
  #14 (permalink)  
Старый 06.12.2014, 13:25
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

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

Сообщение от Ruslan_xDD Посмотреть сообщение
Erolast, Зачем ты записываешь элемент в переменную, но при этом все равно каждый раз обращаешься к нему через getElementById?
Не знаю, я почти год назад это писал

Цитата:
Помогите новичку подскажите пожалуйста можно ли эту кнопку прикрутить вот к этому js ???
Для начала, отформатируй нормально код.
Ответить с цитированием
  #16 (permalink)  
Старый 06.12.2014, 16:21
Аватар для Dr.volt
Новичок на форуме
Отправить личное сообщение для Dr.volt Посмотреть профиль Найти все сообщения от Dr.volt
 
Регистрация: 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();
Ответить с цитированием
  #17 (permalink)  
Старый 06.12.2014, 17:08
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 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.
Ответить с цитированием
  #18 (permalink)  
Старый 06.12.2014, 20:50
Новичок на форуме
Отправить личное сообщение для Alexey_087 Посмотреть профиль Найти все сообщения от Alexey_087
 
Регистрация: 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. Причина: ошибки
Ответить с цитированием
  #19 (permalink)  
Старый 06.12.2014, 21:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

на заметку
<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>
Ответить с цитированием
  #20 (permalink)  
Старый 07.12.2014, 12:56
Новичок на форуме
Отправить личное сообщение для Alexey_087 Посмотреть профиль Найти все сообщения от Alexey_087
 
Регистрация: 06.12.2014
Сообщений: 3

Спасибо большое, всё просто оказалось
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать такую фичу? 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