Разрешить пользователю контролировать воспроизведение аудио на веб-странице - PullRequest
Новая
       0

Разрешить пользователю контролировать воспроизведение аудио на веб-странице

0 голосов
/ 05 октября 2018

Я пытаюсь создать функцию на своей веб-странице, которая позволяет пользователям включать / выключать звук, нажимая цифру 4 на своей клавиатуре.

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

Может кто-нибудь объяснить, почему это не работает? 

localStorage.setItem("preference", "isMusicPlaying");
var audio = document.getElementById('music');
var musicPlaying = localStorage.getItem("preference");
if(musicPlaying == false) {
    audio.play();
}
else {
    audio.pause();
}
document.getElementById("on").style.color = "red";

document.body.onkeyup = function(pressFour){
    if(pressFour.keyCode == 52) {
        if(musicPlaying==false) {
            audio.play();
            document.getElementById("on").style.color = "red";
            document.getElementById("off").style.color = "black";
            document.getElementById("nosound").style.height = "0";
            document.getElementById("nosound").style.width = "0";
            document.getElementById("sound").style.height = "75";
            document.getElementById("sound").style.width = "75";
            document.getElementById('music').play();
        }
        else if(musicPlaying==true) {
            audio.pause();
            document.getElementById("on").style.color = "black";
            document.getElementById("off").style.color = "red";
            document.getElementById("nosound").style.height = "75";
            document.getElementById("nosound").style.width = "75";
            document.getElementById("sound").style.height = "0";
            document.getElementById("sound").style.width = "0";
            document.getElementById('music').pause();
        }
    }
}

HTML 

<html>
<body>
<div class = "container">
 <audio id="music" src="/music/orgmusic.mp3"type="audio/mpeg"></audio>
    <img id ="titleimg"src = "images/titleimage.png">
        <h1>Please click one of the following!</h1>
    <div class = "navigation">
        1. Travel the trail<img id="wagon"src = "images/wagon.png"></br></br>
        2. Learn about the trail<img id="info"src = "images/info.png"></br></br>
        3. See the Oregon Top 10<img id="ten"src = "images/top10.png"></li></br></br>
        4. Turn Sound (<span id="off">Off</span>/<span id="on">On</span>)
        <img id="sound"src="images/volume.png"><img id="nosound"src = "images/mute.png"></br></br>
    </div>
    <div class = "landscape">
        <img id ="grass"src = "images/grassyfield.png">
    </div>
</div>

<link rel="stylesheet" type="text/css" href="/css/mainmenu.css">
<link rel="stylesheet" type="text/css" href="/css/global.css">

<script src="/JS/mainmenu.js"type="text/javascript"></script>
<script src="/JS/global.js"type="text/javascript"></script>

</html>
</body>

Ответы [ 2 ]

0 голосов
/ 06 октября 2018

Ну, вы можете использовать переменную flag, которую вы сохраните в локальном хранилище.Итак, я бы предложил что-то вроде этого: 

const audio = document.getElementById('music');
const musicPlaying = localStorage.getItem("preference");
// The flag variable.
let musicPlaying = false;

if(musicPlaying == false) {
    audio.play();
}
else {
    audio.pause();
}
document.getElementById("on").style.color = "red";

document.body.onkeyup = function(pressFour){
    if(pressFour.keyCode == 52) {
        if(musicPlaying==false) {
            audio.play();
            document.getElementById("on").style.color = "red";
            document.getElementById("off").style.color = "black";
            document.getElementById("nosound").style.height = "0";
            document.getElementById("nosound").style.width = "0";
            document.getElementById("sound").style.height = "75";
            document.getElementById("sound").style.width = "75";
            document.getElementById('music').play();
        }
        else if(musicPlaying==true) {
            audio.pause();
            document.getElementById("on").style.color = "black";
            document.getElementById("off").style.color = "red";
            document.getElementById("nosound").style.height = "75";
            document.getElementById("nosound").style.width = "75";
            document.getElementById("sound").style.height = "0";
            document.getElementById("sound").style.width = "0";
            document.getElementById('music').pause();
        }
        // This will toggle between false/true on each press of the button.
        musicPlaying = !musicPlaying;
        // NOW we save the flag variable into local storage
        localStorage.setItem("preference", musicPlaying)
    }
}

Надеюсь, это поможет.

0 голосов
/ 06 октября 2018

Ваш код немедленно устанавливает переменную localStorage в строку "isMusicPlaying", и я не понимаю, почему.Вместо этого вы можете проверить только то, что равно. Если оно равно нулю, значит, оно не установлено.

Вот код, который я бы предложил.В начале мы проверяем, имеет ли переменная localStorage musicPlaying значение null (что означает, что она не установлена) или true (что означает, что она воспроизводилась до перезагрузки).Затем я сделал функции воспроизведения и паузы, которые делают то, что уже сделал ваш код, но они также обновляют переменную localStorage musicPlaying.Кроме того, я создал функцию playPause, которая проверяет, задана ли для переменной localStorage musicPlaying значение true или false, и выполняет play() или pause() соответственно. 

var audio = document.getElementById('music');
if (localStorage.getItem("musicPlaying") === null) play()
else if (localStorage.getItem("musicPlaying") === "true") play()


function play() {
    localStorage.setItem("musicPlaying", "true")
    audio.play();
    document.getElementById("on").style.color = "red";
    document.getElementById("off").style.color = "black";
    document.getElementById("nosound").style.height = "0";
    document.getElementById("nosound").style.width = "0";
    document.getElementById("sound").style.height = "75";
    document.getElementById("sound").style.width = "75";
    document.getElementById('music').play();
}
function pause() {
    localStorage.setItem("musicPlaying", "false")
    audio.pause();
    document.getElementById("on").style.color = "black";
    document.getElementById("off").style.color = "red";
    document.getElementById("nosound").style.height = "75";
    document.getElementById("nosound").style.width = "75";
    document.getElementById("sound").style.height = "0";
    document.getElementById("sound").style.width = "0";
    document.getElementById('music').pause();
}
function playPause() {
    var musicPlaying = localStorage.getItem("musicPlaying")
    if (musicPlaying == "true") pause()
    else if (musicPlaying == "false") play()
} 
document.getElementById("on").style.color = "red";

document.body.onkeypress = function(pressFour){
  if(pressFour.keyCode == 52) playPause();
}

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...