Реализация звукового файла при появлении элемента

Question

Реализация звукового файла при появлении элемента

Иван Кондрашев Мастер (1262), на голосовании 1 год назад

У меня к сайте подключен чат бот и мне надо чтобы когда появляется его иконка то играл звук. Как это можно реализовать?

Answer 1

Для реализации звукового эффекта при появлении иконки чат-бота на сайте, можно использовать JavaScript.

Сначала нужно добавить аудиофайл на страницу, например, с помощью тега audio:
html

Затем, в коде, который отвечает за появление иконки чат-бота, нужно добавить вызов проигрывания звука:

javascript

 
// получаем элемент иконки чат-бота 
var chatIcon = document.getElementById('chat-icon'); 
 
// получаем элемент аудиофайла 
var sound = document.getElementById('sound'); 
 
// добавляем обработчик события на появление иконки 
chatIcon.addEventListener('load', function() { 
  // проигрываем звук 
  sound.play(); 
});

Не забудьте также обработать ситуацию, когда пользователь уже загрузил страницу, а иконка чат-бота уже на ней есть. Для этого можно использовать аналогичный код, но вызывать его сразу после загрузки страницы:
javascript

 window.addEventListener('load', function() { 
  var chatIcon = document.getElementById('chat-icon'); 
  var sound = document.getElementById('sound'); 
 
  if (chatIcon) { 
    sound.play(); 
  } 
});

Обратите внимание, что код может отличаться в зависимости от конкретной реализации иконки чат-бота на вашем сайте.

Answer 2

Нужно создать элемент, который отвечает за проигрывание звука. Выводить его на страницу не нужно, просто создать.

 const audio = document.createElement('audio');

audio.src = 'Ссылка на файл.mp3';

Дальше уже надо делать проверку, исходя от способа загрузки кнопки. Или добавить audio.play() в конце асинхронной функции, которая отвечает за загрузку... или добавить на кнопку new MutationObserver(), который будет мониторить любое изменение кнопки и при ее появлении сразу же запустит аудиозапись... полное описание функции лучше почитать в документации.

Answer 3

Dlazder Мудрец (16927) 1 год назад

 let audio = new Audio()
audio.src = ''
audio.play()

Answer 4

 var audio = $("#audio")[0]; if (!audio) return false; 
	audio.pause(); 
	var playPromise = audio.play(); 
	if (playPromise !== undefined) { 
		playPromise.then(_ => { 
			// Automatic playback started! 
		}) 
		.catch(error => { 
			 console.log('autoplay err'); 
		}); 
	}

Важно, что без взаимодействия пользователя со страницей, будет ошибка.