Караоке на 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('http://mnogoblog.ru/wp-content/uploads/2018/05/elkakaraoki.mp3');
player.play();
document.write("<div style='background-image:url(http://mnogoblog.ru/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» — привязываем данный код к какой-нибудь страничке.

Всё готово!

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

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

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

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *