Внутренние и внешние js скрипты, запускаемые одной кнопкой воспроизведения - PullRequest
Новая
       7

Внутренние и внешние js скрипты, запускаемые одной кнопкой воспроизведения

1 голос
/ 09 апреля 2020

Я включил приведенный ниже скрипт в страницу, содержащую в основном текст, и он воспроизводит звук и прекрасно переключает кнопку воспроизведения. У меня есть внешний скрипт «fireScript. js», который создает фейерверк с использованием элемента canvas, и я хотел бы, чтобы он воспроизводился вместе со звуком при нажатии кнопки воспроизведения. Скрипт фейерверка отлично работает на другой странице, но он начинается, как только страница открывается. На этой странице я хотел бы отложить сценарий до нажатия кнопки воспроизведения. В поисках я обнаружил добавление внешнего скрипта как потомка головы с getElementByTagName. Я попытался скопировать скрипт заголовка другой страницы в заголовок этой страницы, но он не воспроизводится вообще, даже когда страница открыта. Могу ли я добавить в скрипт ниже строку, которая привела бы fireScript. js в этот скрипт? (Аналогичный вопрос задавался 9 месяцев go ( Запуск фейерверка при нажатии кнопки ), но это выглядит как более простая ситуация, поскольку скрипт фейерверка уже работает в другом месте.) Вложение скрипта в сценарий, кажется, не вариант. Похоже, мне нужно просто добавить строку в блок if, а другую - в блок else, чтобы остановить фейерверк при остановке musi c. Любая помощь будет оценена. Заранее спасибо. 

<img class="playArrow" id="fanfarePlay" alt="play audio" src="../Images/playArrow.png"/>
<canvas id="canvasFireworks"></canvas>
<audio id="fanfareAudio" src="../Audio/garvey_finale.mp3" type="audio/mp3"></audio>

<script type="text/javascript">  
    var clip = document.getElementById("fanfareAudio");
    var playPause = document.getElementById("fanfarePlay");

    playPause.addEventListener("click", function() {
        if (clip.paused == true) {
            clip.play();
            playPause.src="../Images/playPause.png";
        } else {
            clip.pause();
            playPause.src="../Images/playArrow.png";
        }
    });
    clip.onended = function() {
        playPause.src="../Images/playArrow.png";
    };
</script>
...