Караоке на 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('https://mnogoblog.ru/wp-content/uploads/2018/05/elkakaraoki.mp3');
player.play();
document.write("<div style='background-image:url(https://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

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