Javascript-форум - Звук в чате.

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Звук в чате. (https://javascript.ru/forum/misc/74144-zvuk-v-chate.html)

Звук в чате.

Добрый день. Недавно начал увлекаться js. И тут возникла одна проблемка: есть чат, рабочий, но я не знаю, как сделать так, что бы при появлении нового сообщения в чате издавался звук.

Надеюсь на помощь.Заранее спасибо.

(При желании , нужен еще checkbox, что бы включать/выключать данную возможность.)

<button>Клик</button> <input type="checkbox" checked>
<script>
		var chek = document.querySelector('input');
		var audio = new Audio(['https://nvdx.ru/vega.mp3']);
		document.querySelector('button').onclick =()=> chek.checked && audio.play();
</script>

Цитата:

Сообщение от j0hnik (Сообщение 487568)

<button>Клик</button> <input type="checkbox" checked>
<script>
		var chek = document.querySelector('input');
		var audio = new Audio(['https://nvdx.ru/vega.mp3']);
		document.querySelector('button').onclick =()=> chek.checked && audio.play();
</script>

Большое спасибо. Но это немного не то , что мне нужно. Мне надо , когда в чате появляется новый div , то издается звук.

//допустим , id чата #chatroom

Riroy,
найдите функцию добаления сообщений и туда поставьте audio.play();

Цитата:

Сообщение от рони (Сообщение 487572)

Riroy,
найдите функцию добаления сообщений и туда поставьте audio.play();

Я пишу поверхностный код. Исходников у меня нет, они зашифрованы :(

Rise, :lol:
Проaбгрейдим

Цитата:

Сообщение от Riroy

они зашифрованы

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.time{
		margin-right: 10px;
		color: #999;
	}
	.mess{
		color: #555;
		margin-left: 10px;
	}
	.name{
		display: inline-block;
		width: 105px;
	}
</style>
</head>
<body>

	<div id="chatroom"></div>

	<script>
		var room = document.querySelector('#chatroom');
		var observer = new MutationObserver(function(mutations) {
			mutations.forEach(mutation=>{
				var audio = new Audio('http://boobooka.com/wp-content/uploads/2016/09/ICQ_-_Zvuk_as_ki.mp3');
				audio.play();
			});
		});

		observer.observe(room, {childList: true});



		//Эмулятор чата
		var rnd = (min, max) => Math.floor(Math.random() * (max - min)) + min;

		var chat = ['Приветики','Как делишки?','Вы все г***', 'Я тебя люблю!', 'Ты че братан попутал?', 'Как погодка?', 'ля-ля-ля ля-ля-ля'],
		nameUs = ['KiskaLove','100%Малышка','MafiaBoY', 'Spiker'],
		color = ['red','green','blue','cyan'];

		(mess=()=>{
			var rn = rnd(0, nameUs.length);
			room.insertAdjacentHTML('beforeend', `<div><span class="time">${new Date().toLocaleString('ru', {
				hour: '2-digit',
				minute: '2-digit',
				second: '2-digit'
			})}</span> <span class="name" style="color:${color[rn]}">${nameUs[rn]}:</span> <span class="mess">${chat[rnd(0, chat.length)]}</span></div>`);
			setTimeout(mess,rnd(500,3000));
		})();
	</script>
</body>
</html>

есть ли способ не создавать новое аудио каждый раз?
но чтобы при частом нажатии поведение было такое же?

<button>Клик</button> <input type="checkbox" checked>
<script>
	var chek = document.querySelector('input');
	document.querySelector('button').onclick =()=> {
	var audio = new Audio('https://nvdx.ru/vega.mp3');
chek.checked && audio.play();
};
</script>

Цитата:

Сообщение от Rise

Объявить глобально и всё

Так пока предыдущий не воспроизведется новый не хочет играть =(

<button>Клик</button> <input type="checkbox" checked>
<script>
	var chek = document.querySelector('input');
	document.querySelector('button').onclick =()=> {
	var audio = new Audio('https://nvdx.ru/vega.mp3');
chek.checked && audio.play();
};
</script>

<button>Клик</button> <input type="checkbox" checked>
<script>
	var chek = document.querySelector('input');
	var audio = new Audio('https://nvdx.ru/vega.mp3');
	document.querySelector('button').onclick =()=> {
chek.checked && audio.play();
};
</script>

Rise,
Спасибо!