Успокаивающие звуки на любой странице — Журнал «Код» программирование без снобизма

Многовато паники сейчас в интернетах, нужно немного подышать. Так как мы «Код», для подышать у нас тоже есть код. Он будет проигрывать успокаивающий шум леса на любой странице, на которой захотите. Дело на 10 минут.

Алгоритм такой:

Создаём новый объект audio, который будет отвечать за воспроизведение звука.
Говорим ему, чтобы сразу подгружал аудиофайл, а не ждал, когда его хватятся.
Говорим, что за файл.
Говорим, чтобы играл по кругу.
Жмём виртуальную кнопку «Плей».
Всё это упаковываем в файлик, который можно подключить к любой странице.

Аудиофайл мы берём с сайта zapsplat.com и загружаем на наш сайт, чтобы мы и вы могли все им пользоваться.

Шаблон кода с воспроизведением аудио мы берём из нашей предыдущей статьи про вжух. Потому что там нормально всё. Код такой:

// 1. Создаём новый аудиообъект на странице
var audio = new Audio();
// 2. Подготавливаем звук, чтобы он сразу был готов к воспроизведению
audio.preload = 'auto';
// 3. Указываем путь к аудиофайлу
audio.src = 'http://thecode.local/wp-content/uploads/2020/03/zapsplat_nature_ocean_waves_shoreline_rugged_constant_medium_43576.mp3';
// 4. Говорим, чтобы играл по кругу
audio.loop = true;
// 5. Жмём виртуальную кнопку «Плей»
audio.play();

Сохраняем файл с расширением .js и загружаем на наш сайт. Адрес скрипта получается такой: https://thecode.media/wp-content/uploads/2020/03/coronarelax.js

Осталось настроить инъекцию этого произведения на любую страницу. Мы так сто раз уже делали. Вот этот код можно вставить в консоль браузера на любой странице (Вид → Разработчикам → Консоль)

var js = document.createElement('script');

js.src = "https://thecode.media/wp-content/uploads/2020/03/coronarelax.js";

document.body.appendChild(js);

Если нужно встроить этот код через исходный код страницы, используйте обычный импорт скрипта:

<script

src="https://thecode.media/wp-content/uploads/2020/03/coronarelax.js">

</script>

Теперь дышите. И уберите руки от лица :-*

Текст:

Михаил Полянин

Редактор:

Максим Ильяхов

Обложка:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Маша Климентьева