Autor Zpráva
poolo
Profil
Zdravim ! Momentalne pracujem na webe zvukovych efektov ! Preto potrebujem docielit, aby som na jednej stranke mohol prehrat viac zvukov. Nasiel som JS & CSS navod ako prisposobit audio prehravac!

JS kod :
var activeSong;
//Plays the song. Just pass the id of the audio element.
function play(id){
    //Sets the active song to the song being played.  All other functions depend on this.
    activeSong = document.getElementById(id);
    //Plays the song defined in the audio tag.
    activeSong.play();
    
    //Calculates the starting percentage of the song.
    var percentageOfVolume = activeSong.volume / 1;
    var percentageOfVolumeMeter = document.getElementById('volumeMeter').offsetWidth * percentageOfVolume;
    
    //Fills out the volume status bar.
    document.getElementById('volumeStatus').style.width = Math.round(percentageOfVolumeSlider) + "px";
    
}
//Pauses the active song.
function pause(){
    activeSong.pause();
}
//Does a switch of the play/pause with one button.
function playPause(id){
    //Sets the active song since one of the functions could be play.
    activeSong = document.getElementById(id);
    //Checks to see if the song is paused, if it is, play it from where it left off otherwise pause it.
    if (activeSong.paused){
         activeSong.play();
    }else{
         activeSong.pause();
    }
}

//Updates the current time function so it reflects where the user is in the song.
//This function is called whenever the time is updated.  This keeps the visual in sync with the actual time.
function updateTime(){
    var currentSeconds = (Math.floor(activeSong.currentTime % 60) < 10 ? '0' : '') + Math.floor(activeSong.currentTime % 60);
    var currentMinutes = Math.floor(activeSong.currentTime / 60);
    //Sets the current song location compared to the song duration.
    document.getElementById('songTime').innerHTML = currentMinutes + ":" + currentSeconds + ' / ' + Math.floor(activeSong.duration / 60) + ":" + (Math.floor(activeSong.duration % 60) < 10 ? '0' : '') + Math.floor(activeSong.duration % 60);

    //Fills out the slider with the appropriate position.
    var percentageOfSong = (activeSong.currentTime/activeSong.duration);
    var percentageOfSlider = document.getElementById('songSlider').offsetWidth * percentageOfSong;
    
    //Updates the track progress div.
    document.getElementById('trackProgress').style.width = Math.round(percentageOfSlider) + "px";
    
    if (activeSong.currentTime==activeSong.duration) {
        activeSong.currentTime = 0;
        activeSong.pause();
    }
}
function volumeUpdate(number){
    //Updates the volume of the track to a certain number.
    activeSong.volume = number / 100;
}
//Changes the volume up or down a specific number
function changeVolume(number, direction){
    //Checks to see if the volume is at zero, if so it doesn't go any further.
    if(activeSong.volume >= 0 && direction == "down"){
        activeSong.volume = activeSong.volume - (number / 100);
    }
    //Checks to see if the volume is at one, if so it doesn't go any higher.
    if(activeSong.volume <= 1 && direction == "up"){
        activeSong.volume = activeSong.volume + (number / 100);
    }
    
    //Finds the percentage of the volume and sets the volume meter accordingly.
    var percentageOfVolume = activeSong.volume / 1;
    var percentageOfVolumeSlider = document.getElementById('volumeMeter').offsetWidth * percentageOfVolume;
    
    document.getElementById('volumeStatus').style.width = Math.round(percentageOfVolumeSlider) + "px";
}
//Sets the location of the song based off of the percentage of the slider clicked.
function setLocation(percentage){
    activeSong.currentTime = activeSong.duration * percentage;
}
/*
Gets the percentage of the click on the slider to set the song position accordingly.
Source for Object event and offset: http://website-engineering.blogspot.com/2011/04/get-x-y-coordinates-relative-to-div-on.html
*/
function setSongPosition(obj,e){
    //Gets the offset from the left so it gets the exact location.
    var songSliderWidth = obj.offsetWidth;
    var evtobj=window.event? event : e;
    clickLocation =  evtobj.layerX - obj.offsetLeft;
    
    var percentage = (clickLocation/songSliderWidth);
    //Sets the song location with the percentage.
    setLocation(percentage);
}

//Set's volume as a percentage of total volume based off of user click.
function setVolume(percentage){
    activeSong.volume =  percentage;
    
    var percentageOfVolume = activeSong.volume / 1;
    var percentageOfVolumeSlider = document.getElementById('volumeMeter').offsetWidth * percentageOfVolume;
    
    document.getElementById('volumeStatus').style.width = Math.round(percentageOfVolumeSlider) + "px";
}

//Set's new volume id based off of the click on the volume bar.
function setNewVolume(obj,e){
    var volumeSliderWidth = obj.offsetWidth;
    var evtobj = window.event? event: e;
    clickLocation = evtobj.layerX - obj.offsetLeft;
    
    var percentage = (clickLocation/volumeSliderWidth);
    setVolume(percentage);
}
//Stop song by setting the current time to 0 and pausing the song.
function stopSong(id){
    activeSong = document.getElementById(id);
    activeSong.currentTime = 0;
    activeSong.pause();
}


HTML kod:
<div>
<audio id="song" ontimeupdate="updateTime()">
<source src="zvuk.mp3" type="audio/mp3"/>
  Your browser does not support the audio tag.
</audio>
<div id="songPlay" onclick="play('song')">Play</div>
<div id="songSlider" onclick="setSongPosition(this,event)"><div id="trackProgress"></div></div>
<div id="songTime">0:00 / 0:00</div>
<div id="songStop" onclick="stopSong('song')">Stop</div>
</div>

<br />
<br />

<div>
<audio id="song1" ontimeupdate="updateTime()">
<source src="zvuk1.mp3" type="audio/mp3"/>
  Your browser does not support the audio tag.
</audio>
<div id="songPlay" onclick="play('song1')">Play</div>
<div id="songSlider" onclick="setSongPosition(this,event)"><div id="trackProgress"></div></div>
<div id="songTime">0:00 / 0:00</div>
<div id="songStop" onclick="stopSong('song1')">Stop</div>
</div>

Toto je len tescovacia stranka. Niektore funkcie v JS funguju na ID zvuku. tieto funkcie funguju bez problemov (napr. play alebo stop).
Problem nastava, ked potrebujem aby pre kazdy zvuk osobitne fungoval aj ukazovac casu:
<div id="songTime">0:00 / 0:00</div>
a progress bar:
<div id="songSlider" onclick="setSongPosition(this,event)"><div id="trackProgress"></div></div>


V JS sa velmi nevyznam, tak neviem co s tym. Skusal som priradit kazdemu divu specificke ID, ale od hodnoty ID je odvodene aj CSS.


A este jeden problem ! Kym je progress bar uzatvoreny len v dive.... je vsetko v poriadku...ale ked ho vlozim do tabulky.... tak sice ukazuje spravne ale nefunguje spravne na kliknutie. Nasiesto posunutia zvuku ho bud uplne vypne alebo posunie zle!

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0