Ползунок громкости аудио диапазона Javascript/HTML5

Я нахожусь на своей первой неделе обучения тому, как кодировать и запускать некоторые проблемы с аудио HTML5 о том, как подключить слайдер к тому.Ползунок громкости аудио диапазона Javascript/HTML5

Мой код ниже, и любые предложения приветствуются. Основная часть, о которой я не уверен, - это мой сценарий для setVolume(); У меня просто возникают проблемы с моей головой.

<!DOCTYPE html> 
<head> 
    <title>Slider + Play/Pause</title> 

    <script> 
     "use strict"; 
     /*function playMusic() { 
      document.getElementById("mediaClip").play(); 
     }*/ 
var mediaClip = document.getElementbyId("mediaClip"); 
    var volume1 = document.getElementbyId("volume1"); 

function playPause() { 
    var mediaClip = document.getElementById("mediaClip"); 
    if (mediaClip.paused) { 
     mediaClip.play(); 
    } else { 
     mediaClip.pause(); 
    } 
} 

function change() { 
    var button1 = document.getElementById("button1"); 
    if (button1.value==="Play") button1.value = "Pause"; 
    else button1.value = "Play"; 
} 

function setVolume() { 
    var mediaClip = document.getElementById("mediaClip").value; 
    document.getElementById("mediaClip").value = mediaClip; 
    mediaClip.volume = document.getElementById("volume1").value; 

} 
    </script>  
</head> 
<body> 
    <audio id="mediaClip" src="takeMeToChurchHozier.mp3" controls> 
     <p>Your browser does not support the audio element</p> 
    </audio> 
    <br/> 
    <input onclick="change();playPause()" type="button" value="Play"  id="button1"> 
    <br/> 
    <input type="range" onchange="setVolume()" id='volume1' min=0 max=1  step=0.01 value='1'> 
     </body> 
</html>

источник

2015-09-21 Seamus W

В вашей setVolume() функции, изменить код так:

var mediaClip = document.getElementById("mediaClip"); 
mediaClip.volume = document.getElementById("volume1").value;

Объяснение:

Я изменил первую строку кода из var mediaClip = document.getElementById("mediaclip").value; в var mediaClip = document.getElementById("mediaClip"); потому, чтобы изменить атрибут или свойство элемента, вам нужно использовать этот синтаксис element.property не element.value.property.

Я полностью удалил вторую линию, потому что ничто не означало ничего, кроме того, что там было необходимо. Подумайте об этом, почему вы присвоите значение элемента текущему значению элемента ???

Ваша третья строка (в моем коде, это вторая строка) не изменилась.

источник

2015-09-22 00:03:40 Arjun

Ahhh Это работает! Большое спасибо, что я застрял на этом часами. Я знаю, что вторая строка не имеет большого смысла, хаха, я пытался все, что мог. Приятно знать, что я был не так далеко, как я думал. –

@SeamusW Вас тепло приветствуют !!! Как вы сказали, это сработало для вас, тогда, пожалуйста, примите этот ответ. И будет хорошо, если вы тоже повысите! – Arjun

Ползунок громкости аудио диапазона Javascript/HTML5

ответ

Смежные вопросы