Не воспроизводится аудио файл, выдает ошибку

Есть код, при перезагрузке или просто загрузке страницы должен воспроизводится аудио файл. Даный файл меняется в зависимости от рандомно выбраного цвета из массива. Так вот, код работает вроде как правильно но сам звук не воспроизводит, выдает ошибку:

index.js:28 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first

Как исправить эту ошибку? Ниже код:

var buttonsColours = ["red", "blue", "green", "yellow"];
var gamePattern = [];

function nextSequence() {

  // Выбираем рандомное число от 0 до 3
  var randNumber = randomNumber(0, 3);

  // Функция выбора рандомного числа
  function randomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }


  // Получаем рандомный элемент из массива
  var randomChosemColour = buttonsColours[randNumber];


  // Заносим выбранный цвет в пустой массив
  gamePattern.push(randomChosemColour);

  // Эффект flash
  var colourObj = $("#" + randomChosemColour);
  colourObj.fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);

  // Играет нужный аудиофайл 
  var audioColour = new Audio("sounds/" + randomChosemColour + ".mp3");
  audioColour.play();
}

nextSequence();

Ответы (1 шт):

Автор решения: Алексей Шиманский

Сейчас в браузерах нельзя программно включить аудио. Это продиктовано тем, что некоторые сайты злоупотребляют автоматическим воспроизведением звука и пользователям сети интернет не нравится внезапно играющий звук неизвестно откуда при открытии вкладок (особенно если этот звук не виден, например спрятан в разметке). Поэтому производители браузеров запретили воспроизводить аудио, если пользователь не взаимодействовал с вкладкой... собственно об этом и текст с предупреждением

→ Ссылка