MP3-плеер на JavaScript

Не мог бы кто-нибудь сказать мне, что я сделал не так? Я хочу создать mp3-плеер с css, html и javascript. Единственное, что в данный момент делает скрипт, - это запускать или останавливать аудио-файл. Проблема в том, что я всегда получаю сообщение об ошибке .: TypeError: document.getElementById (...) is null; Но я не знаю почему. Спасибо большое за помощь!!!

Сценарий:

<html>
<head>
    <meta charset="utf-8" />
    <title>Video | Audio</title>
</head>
<body>

    <script type="text/javascript">

    var hear = document.getElementById('#listen');
    document.getElementById('#control').addEventListener("click", function() {
        if(hear.paused) {
            hear.play();
        } else {
            hear.pause();
        }
    })


    </script>

    <audio id="listen" src="song.mp3">
        ERROR
    </audio>

    <button id="control">control</button>

</body>
</html>

javascript html css
person ghnome    schedule 14.07.2015    source источник
comment
Идентификатор идет после вашего встроенного скрипта   -  person technosaurus    schedule 14.07.2015
comment
На этот вопрос, скорее всего, уже ответили раньше на SO. Самый простой способ решить эту проблему - добавить _1 _ в свой тег script или переместите скрипт внизу страницы.   -  person Kyll    schedule 14.07.2015
comment
Что вы имеете в виду, когда идентификатор идет после моего встроенного скрипта   -  person ghnome    schedule 14.07.2015
comment
Уберите "#" из ваших getElementById звонков. Пример: document.getElementById('listen').   -  person Mike Cluck    schedule 14.07.2015
comment
Но проблема без "#" такая же   -  person ghnome    schedule 14.07.2015
comment
вы тоже удалили тот из document.getElementById('#control')?   -  person WWZee    schedule 14.07.2015
comment
возможный дубликат порядка загрузки и выполнения скриптов   -  person Kyll    schedule 14.07.2015
comment
Я попробую прояснить некоторые предыдущие комментарии :) В вашем примере код читается и выполняется в том же порядке, в котором он написан. Следовательно, ваш <script> блок выполняется до того, как ваш <audio> элемент будет добавлен на страницу. Когда ваш скрипт ищет элемент listen, его еще нет на странице, потому что он идет после <script>.   -  person Tyler Roper    schedule 30.10.2018

Ответы (1)


arrow_upward
3
arrow_downward

Согласно этому ответу на stackoverflow, лучше всего поместить свои скрипты в конец тега body, чтобы избежать подобных проблем с синхронизацией. Вот как вам следует изменить свой код:

<html>
<head>
    <meta charset="utf-8" />
    <title>Video | Audio</title>
</head>
<body>



    <audio id="listen" src="song.mp3">
        ERROR
    </audio>

    <button id="control">control</button>

    <script type="text/javascript">

    var hear = document.getElementById('listen');
    document.getElementById('control').addEventListener("click", function() {
        if(hear.paused) {
            hear.play();
        } else {
            hear.pause();
        }
    })


    </script>

</body>
</html>

Причина, по которой он не работал раньше, заключается в том, что веб-страницы анализируются сверху вниз, включая сценарии, поэтому ваша кнопка не существовала к моменту выполнения вашего сценария, поэтому ваш сценарий не мог ее найти. Кроме того, когда вы используете getElementById, вам нужно вызывать его без использования хеша.

person Maximillian Laumeister    schedule 14.07.2015
comment
Пожалуйста! Не уверен, почему мой ответ получил 3 голоса против, кажется, единственный, который работает. - person Maximillian Laumeister; 14.07.2015
comment
@ user4825080 Не забудьте поставить галочку рядом с одним из ответов, чтобы отметить его как принятый! - person Maximillian Laumeister; 14.07.2015
comment
Оооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо - person ghnome; 14.07.2015
comment
он, вероятно, получил голосование (не мной), потому что это всего лишь вариант вопроса, который задавали 1000 разных способов, и он не объясняет, почему он работает или почему он считается лучшей практикой, или какой-либо из множества разных альтернатив, которые будут работать, желательно путем ссылки на существующие вопросы / ответы. - person technosaurus; 14.07.2015
comment
@technosaurus Спасибо за объяснение, все еще изучаю веревки здесь. - person Maximillian Laumeister; 14.07.2015