Караоке на Javascript

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

Скачать исходники для статьи можно ниже

Будем создавать караоке песни “В лесу родилась ёлочка”.

Также для караоке нам понадобится музыка – скачать песню в лесу родилась ёлочка.

И фоновая картинка – скачать фоновую картинку.

Для запуска JavaScript кода на сайте wordpress установим плагин – CSS & JavaScript Toolbox – сведения о плагине:
Количество активных установок: 20,000+
Рейтинг плагина: 5 из 5
Сайт плагина: “ru.wordpress.org/plugins/css-javascript-toolbox/”
Автор плагина: Wipeout Media

Устанавливаем и активируем плагин CSS & JavaScript Toolbox.

Далее переходим в пункт CSS & JavaScript Toolbox:

Создаем блок – жмем на кнопку “New Code Block”.

В блок вводим следующий код:

<form>
<input type="button" value="Первая кнопка" onClick="but1()">
<input type="button" value="Вторая кнопка" onClick="">
</form>

<script>

var timerId = setInterval(timerFunction, 1000);
clearInterval(timerId);
function but1() {
timerId = setInterval(timerFunction, 2000);
var player = new Audio('/wp-content/uploads/2018/05/elkakaraoki.mp3');
player.play();
document.write("<div style='background-image:url(/wp-content/uploads/2018/05/elka.jpg); width: 426px; height: 266px;'>");
}



var users = new Array(); // в массиве 0 элементов
users[2] = "В лесу родилась ёлочка,<br>";
users[3] = "";
users[4] = "В лесу она росла,<br>";
users[5] = "";
users[6] = "Зимой и летом стройная<br> ";
users[7] = " зелёная была<br>";
users[8] = "";
users[9] = "Зимой и летом стройная";
users[10] = "<br>";
users[11] = " зелёная была<br> </div>";
users[12] = "";
var i=1;



function timerFunction() {
     i=i+1;
     // document.write("<br>");
     document.write(users[i]);
     if (i > 11) {
      clearInterval(timerId);
      
     }

}
</script>

Далее во вкладке “Page” – привязываем данный код к какой-нибудь страничке.

Всё готово!

Заходим на указанную страничку и видим следующее:

Жмем на кнопку “Первая кнопка”, которая появится слева вверху – и сразу начинает проигрываться музыка, а через некоторое время появляются постепенно строчки к песенке “В лесу родилась ёлочка”:

На этом все! Красивых вам сайтов!