Звук вверх и вниз и .currentTime HTML5/Javascript

Имейте проблему с некоторым кодом .. Я не могу найти что-то не так с этим и, похоже, совпадает с моим другим кодом, который работает. Просто вверх и вниз громкость и goToChorus, что у меня проблемы. Любая помощь приветствуется!Звук вверх и вниз и .currentTime HTML5/Javascript

<!DOCTYPE html> 
<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").value; 

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"); 
    mediaClip.volume = document.getElementById("volume1").value; 

} 
function backStart() { 
    document.getElementById("mediaClip").currentTime = 0; 
} 

function upVolume() { 
    if (mediaClip.volume < 1) 
    { 
     mediaClip.volume += 0.1; 
    } 

} 

function downVolume() { 
    if (mediaClip.volume > 0) 
    { 
     mediaClip.volume -= 0.1; 
    } 
} 

function goToChorus() { 
    mediaClip.currenTime = 55; 
} 
    </script> 


</head> 
<body onload="init()"> 
    <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"> 
    <input type="range" onchange="setVolume()" id='volume1' min=0 max=1 step=0.01 value='1'/> 
    <br/> 
    <button onclick ="backStart()">Reset</button> 
    <br/> 
    <button onclick="upVolume()">Volume up 10%</button> 
    <button onclick="downVolume()">Volume down 10%</button> 
    <br/> 
    <input type="button" value="Click for chorus" onclick="goToChorus()"> 
</body> 
</html>

источник

2015-09-22 Seamus W

Что случилось, что вы испытываете, точно? Конкретные сообщения об ошибках? –

Ничего не происходит, когда я нажимаю кнопки. Также, когда я нажимаю, чтобы запустить файл в Netbeans, я получаю сообщение об ошибке Не удалось загрузить ресурс: net :: ERR_EMPTY_RESPONSE (| ошибка, сеть) at public_html/index.html –

Хорошо, сначала сначала. Возьмите код JavaScript и вытащите его из элемента <head>. Это ломает вещи, как

var mediaClip = document.getElementbyId("mediaClip");

, потому что он пытается найти элемент «mediaClip» до того, как браузер даже получил до этой строки кода и создан, что DOM элемента. Наличие JavaScript ПОСЛЕ HTML-кода позволит создавать элементы DOM браузером, тогда ваш код будет работать.

Во-вторых, у вас есть несколько опечаток в вашем JavaScript. Дважды вы пытаетесь использовать метод getElementbyId (обратите внимание на нижний регистр b). Изменение их на getElementById должно исправить.

Итак, теперь ваш код будет работать после загрузки DOM и найдет элементы правильно. Это должно позволить остальным функциям работать, поскольку все они полагаются на переменную mediaClip, которая правильно устанавливается в начале.

Еще одна вещь: вам нужно добавить что-то внутри upVolume() и downVolume(), чтобы изменить значение ползунка volume1. Прямо сейчас, когда вы нажимаете кнопки вверх/вниз, громкость будет обновляться, но слайдер не перемещается.

Вот JSFiddle вашего кода, который я получил на работу после вышеуказанных изменений: http://jsfiddle.net/vcxsn6q7/

источник

2015-09-22 16:45:55

Спасибо за то, что переместив javascript сверху тела на нижний уровень, он, похоже, исправил кнопки регулировки громкости. Не уверен, что кнопка хорус работает, потому что она может быть просто хромированной и не будет открываться ни в каких других браузерах, спасибо за вашу помощь :) –

Получил все благодаря работе! –

Звук вверх и вниз и .currentTime HTML5/Javascript

ответ

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