Форум

Riroy · #1 (**permalink**) 17.06.2018, 18:27

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

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

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

j0hnik · #2 (**permalink**) 17.06.2018, 19:56

<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>

Riroy · #3 (**permalink**) 17.06.2018, 20:21

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

<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

рони · #4 (**permalink**) 17.06.2018, 20:30

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

Riroy · #5 (**permalink**) 18.06.2018, 11:52

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

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

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

Rise · #6 (**permalink**) 18.06.2018, 16:58

j0hnik,
new Audio([URLString]) квадратные скобки это необязательный параметр, не массив.

Riroy,
MutationObserver, но надо знать вашу иерархию элементов.

<div id="chat">Messages:</div>
<script>
var target = document.getElementById('chat');
var observer = new MutationObserver(function (mutationsList) {
    //console.log(mutationsList);
    for (var mutation of mutationsList) {
        if (mutation.addedNodes.length) {
            audio.play();
            break;
        }
    }
});
var audio = new Audio('https://nvdx.ru/vega.mp3');
audio.addEventListener('canplay', function () {
    observer.observe(target, { childList: true });
});

function fakeServer(t, i, ms) {
    var id = setInterval(function () {
        if (i) t.textContent += i--;
        else clearInterval(id);
    }, ms);
}
fakeServer(target, 5, 5000);
</script>

j0hnik · #7 (**permalink**) 18.06.2018, 17:01

Rise,

Про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>

j0hnik · #8 (**permalink**) 18.06.2018, 17:12

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

<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 · #9 (**permalink**) 18.06.2018, 18:06

Добавил еще проверку, ведь нам удаление не нужно же.

j0hnik,
Объявить глобально и всё. Крутой чат

j0hnik · #10 (**permalink**) 18.06.2018, 18:50

Сообщение от 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>

Форум

Справочник

Discord чат

Курсы javascript