if-statement: Using Javascript to change stylesheets with if statement?

lundi 28 septembre 2015

Using Javascript to change stylesheets with if statement?

I'm having trouble with my code.. Basically what I want is for when the volume slider is over halfway for it to turn red, and when its under halfway for it to turn green. I have the style sheets created I just don't know how to link it all together. Am I close? Thanks for feedback. (Focus: Last function and the Volume1 input)

<!DOCTYPE html>
<html>
<head>
<title>Audio Javascript Demo</title>

<link id="green" rel="stylesheet" type="text/css" title="Red" href="styleSheets/Red.css">
<link id="red" rel="alternate stylesheet" type="text/css" title="Green" href="styleSheets/Green.css">

<script>
var mediaClip; // shortcut for document.getElementById('mediaClip')

function init()
{
// initialise the mediaClip variable  
mediaClip = document.getElementById('mediaClip'); 

// get the length of the audio clip
document.getElementById('clipDuration').innerHTML = 'Length: ' + Math.floor(mediaClip.seekable.end(0) / 60) + ':' + twoDigits(Math.floor(mediaClip.seekable.end(0) % 60));

// updae the displayed data every 300 miliseconds
setInterval(updateDisplayedData,300);
}


function updateDisplayedData()
{
// update the current position
 document.getElementById('currentPosition').innerHTML = 'Current Position: ' + Math.floor(mediaClip.currentTime / 60) + ':' + twoDigits(Math.floor(mediaClip.currentTime % 60)) + "/4:02";

// update the current volume
if(mediaClip.muted)
{
   document.getElementById('currentVolume').innerHTML = 'Volume: MUTED';
}
else
{
  document.getElementById('currentVolume').innerHTML = 'Volume test: ' + Math.floor(mediaClip.currentTime *100  / 243);
}
{

}
}


function playClip()
{
document.getElementById('mediaClip').play();  
}


function pauseMusic()
{
document.getElementById('mediaClip').pause();  
}


function stopClip()
{ 
// There is no stop function.
// Instead, we pause and set the currentTime to 0
document.getElementById('mediaClip').pause();  
document.getElementById('mediaClip').currentTime = 0;
}


function decreaseVolume()
{
// minimum volume is 0  
if(mediaClip.volume > 0)
{
 mediaClip.volume -= 0.01;     
} 
}


function increaseVolume()
{
// maximum volume is 1
if(mediaClip.volume < 1)
{
 mediaClip.volume += 0.01;
}
}


function toggleMute()
{
if(mediaClip.muted)
{
   mediaClip.muted = false;
}
else
{
  mediaClip.muted = true;     
}
}


function toggleControls()
{
if(mediaClip.controls)
{
  mediaClip.controls = false;
}
else
{
  mediaClip.controls = true;     
}
}


function Goto15Secs()
{
mediaClip.currentTime = 15;
}


function twoDigits(number) 
{
if (number < 10) 
{ 
 number = ("0" + number).slice(-2); 
}
return number;
}

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 setTime() {
   var mediaClip = document.getElementById("mediaClip");
   mediaClip.currentTime = document.getElementById("time1").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() {
    document.getElementById("mediaClip").currentTime = 55; 
}

function changeColor(sheet) {
    if (document.getElementById("volume1").value > 0.5){
      document.getElementById("Red").setAttribute('href', sheet);
  }
  else{
      document.getElementById("Green").setAttribute('href', sheet);
  }
}

</script>

</head>

<body onload = 'init()'>

<audio id = 'mediaClip' controls src = 'take_me_to_church_hozier.mp3'>  
<p>Your browser does not support the 'audio' tag </p>
</audio>

<br>
<button onclick = 'playClip()'>Play</button>
<button onclick = 'pauseMusic()'>Pause</button>
<button onclick = 'stopClip()'>Stop</button>
<br>
<button onclick = 'decreaseVolume()'>Decrease Volume</button>
<button onclick = 'increaseVolume()'>Increase Volume</button>
<button onclick = 'toggleMute()'>Toggle Mute</button>
<br>
<button onclick = 'toggleControls()'>Toggle Controls</button>
 <br>
<button onclick = 'Goto15Secs()'>Goto 15 Seconds</button>
<br/>
<br/>
<input onclick="change();playPause()" type="button" value="Play" id="button1">
<input type="range" onchange="setVolume();changeColor('styleSheets/Green.css')" id='volume1' min=0 max=1 step=0.01 value='1'/>
<br/>
<button onclick ="backStart()">Reset</button>
<input type="range" onchange="setTime()" id="time1" min="0" max="242" step="2.42" value="0"/>
<br/> 
<button onclick="upVolume()">Volume up 10%</button>
<button onclick="downVolume()">Volume down 10%</button>
<br/>
<button onclick="gotoChorus()">Go to chorus</button>

<div>
<p id='clipDuration'></p>
<p id='currentPosition'></p>
<p id='currentVolume'></p>
</div>

</body>
</html>

if-statement

lundi 28 septembre 2015

Using Javascript to change stylesheets with if statement?

Aucun commentaire:

Enregistrer un commentaire