Как переключить воспроизведение / паузу аудио одной кнопкой - PullRequest
Новая
       44

Как переключить воспроизведение / паузу аудио одной кнопкой

0 голосов
/ 03 мая 2018

Я никогда прежде не работал с javascript, но я попробовал поискать в Google решение, как создать кнопку воспроизведения / паузы для аудио, и я нашел то, что кажется хорошим и простым решением на этом сайте: Как переключить паузу воспроизведения звука () с помощью одной кнопки или ссылки? (PS. У меня недостаточно репутации, чтобы прокомментировать решение Iceman и напрямую спросить его, что может быть не так - я бы сделал, если бы мог.)

Но, когда я вставляю фрагменты кода в мой документ, ничего не происходит (полученный текст не кликабелен). Могут ли некоторые из вас взглянуть и сказать, что я делаю не так? Вполне возможно, что это что-то глупое, но я сам не вижу этого.

Index.html: 

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Ukendt Navn ...</title>
    <script>
        var myAudio = document.getElementById("myAudio");
        var isPlaying = false;

        function togglePlay() {
        if (isPlaying) {
            myAudio.pause()
        } else {
            myAudio.play();
        }
        };
        myAudio.onplaying = function() {
        isPlaying = true;
        };
        myAudio.onpause = function() {
        isPlaying = false;
        };
    </script>
    <style type="text/css">
        #content {
            border: 1px solid blue;
            margin: auto;
            max-width: 20vw;
            margin-top: 30vw;
            color: black;
        }
	</style>
</head>
<body>
    <div id="content">
        <audio id="myAudio" src="birds.mp3" preload="auto"></audio>
        <a onClick="togglePlay()">Click here to hear.</a>
    </div>
</body>
</html>

Мой тестовый сайт: http://wyrdling.com/other/ukendtnavn/

1 Ответ

0 голосов
/ 03 мая 2018

Вы пытаетесь вызвать document.getElementById("myAudio") до загрузки элемента, поэтому вы можете либо вызвать его после полной загрузки страницы, либо поместить скрипт непосредственно перед окончанием тега body. 

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Ukendt Navn ...</title>
    <script>
        window.addEventListener('load', function(){
            var myAudio = document.getElementById("myAudio");
            
            myAudio.onplaying = function() {
              isPlaying = true;
            };
            myAudio.onpause = function() {
              isPlaying = false;
            };
        });
        
        var isPlaying = false;
        
        function togglePlay() {
            if (isPlaying) {
                myAudio.pause()
            } else {
                myAudio.play();
            }
        }
    </script>
    <style type="text/css">
        #content {
            border: 1px solid blue;
            margin: auto;
            max-width: 20vw;
            margin-top: 30vw;
            color: black;
        }
	</style>
</head>
<body>
    <div id="content">
        <audio id="myAudio" src="http://wyrdling.com/other/ukendtnavn/birds.mp3" preload="auto"></audio>
        <a onClick="togglePlay()">Click here to hear.</a>
    </div>
</body>
</html>
...