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> <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! |
||
Časová prodleva: 11 let
|
0