Будем создавать караоке песни “В лесу родилась ёлочка”.
Также для караоке нам понадобится музыка – скачать песню в лесу родилась ёлочка.
Для запуска 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” – привязываем данный код к какой-нибудь страничке.
Всё готово!
Заходим на указанную страничку и видим следующее:
Жмем на кнопку “Первая кнопка”, которая появится слева вверху – и сразу начинает проигрываться музыка, а через некоторое время появляются постепенно строчки к песенке “В лесу родилась ёлочка”:
На этом все! Красивых вам сайтов!