Успокаивающие звуки на любой странице

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

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

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

Аудио­файл мы берём с сай­та 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>

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