| Autor |
Nachricht |
forutuna
Threadersteller
Dabei seit: 22.08.2007
Ort: Barnstorf
Alter: 46
Geschlecht: 
|
Verfasst Mi 22.01.2014 11:17
Titel Audio-Datei stoppt bei Auwahl einer anderen Audio-Datei nic |
  |
|
Grüßt euch,
Das abspielen der Audio-Dateien funktioniert eigentlich soweit. Ich habe drei Audiodateien mit HTML5 <audio id="fürjedeeineandere"> eingefügt. Wenn ich auf einen der Songs auf Play drücke wird der jeweilige Titel auch Ordnungsgemäß abgespielt. Klicke ich nun einen anderen Song, wir der auch abgepielt, jedoch wird der vorherige nicht automatisch gestoppt. Somit laufen beide gleichzweitig. Wenn ich den dritten jetzt anklicke laufen alle drei. Ich muss somit erst den anderen stoppen damit ich den nächsten ohne ein durcheinander zu haben abspielen lassen kann. Was muss ich verändern um diese Problem nicht mehr zu haben? Vielen Dank im voraus.
| Code: |
var activeSong;
function play(id){
activeSong = document.getElementById(id);
activeSong.play();
var percentageOfVolume = activeSong.volume / 1;
var percentageOfVolumeMeter = document.getElementById('volumeMeter').offsetWidth * percentageOfVolume;
document.getElementById('volumeStatus').style.width = Math.round(percentageOfVolumeSlider) + "px";
}
function pause(){
activeSong.pause();
}
function playPause(id){
activeSong = document.getElementById(id);
if (activeSong.paused){
activeSong.play();
}else{
activeSong.pause();
}
}
function updateTime(){
var currentSeconds = (Math.floor(activeSong.currentTime % 60) < 10 ? '0' : '') + Math.floor(activeSong.currentTime % 60);
var currentMinutes = Math.floor(activeSong.currentTime / 60);
document.getElementById('songTime').innerHTML = currentMinutes + ":" + currentSeconds + ' / ' + Math.floor(activeSong.duration / 60) + ":" + (Math.floor(activeSong.duration % 60) < 10 ? '0' : '') + Math.floor(activeSong.duration % 60);
var percentageOfSong = (activeSong.currentTime/activeSong.duration);
var percentageOfSlider = document.getElementById('songSlider').offsetWidth * percentageOfSong;
document.getElementById('trackProgress').style.width = Math.round(percentageOfSlider) + "px";
}
function volumeUpdate(number){
activeSong.volume = number / 100;
}
function changeVolume(number, direction){
if(activeSong.volume >= 0 && direction == "down"){
activeSong.volume = activeSong.volume - (number / 100);
}
if(activeSong.volume <= 1 && direction == "up"){
activeSong.volume = activeSong.volume + (number / 100);
}
var percentageOfVolume = activeSong.volume / 1;
var percentageOfVolumeSlider = document.getElementById('volumeMeter').offsetWidth * percentageOfVolume;
document.getElementById('volumeStatus').style.width = Math.round(percentageOfVolumeSlider) + "px";
}
function setLocation(percentage){
activeSong.currentTime = activeSong.duration * percentage;
}
function setSongPosition(obj,e){
var songSliderWidth = obj.offsetWidth;
var evtobj=window.event? event : e;
clickLocation = evtobj.layerX - obj.offsetLeft;
var percentage = (clickLocation/songSliderWidth);
setLocation(percentage);
}
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";
}
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);
}
function stopSong(){
activeSong.currentTime = 0;
activeSong.pause();
}
|
Der HTML-Code wird aus der Datenbank gezogen. Die Drei Audios werden jeweils mit unterschiedlichen ID's angesprochen:
| Code: |
<div class="track <?=$row['class']?>" itemprop="track" itemscope itemtype="http://schema.org/MusicRecording">
<meta content="<?=$row['mp3']?>" itemprop="audio">
<audio itemscope itemtype="http://schema.org/AudioObject" id="<?=$row['class']?>" ontimeupdate="updateTime()">
<source src="<?=$row['ogg']?>" type="audio/ogg">
<source src="<?=$row['mp3']?>" type="audio/mpeg" itemprop="embedUrl">
</audio>
<div id="songPlayPause" class="play playbutton" onclick="playPause('<?=$row['class']?>')"></div>
<div id="songTime"></div>
<div id="songSlider" onclick="setSongPosition(this,event)"><div id="trackProgress"></div></div>
</div>
|
|
|
| |
   |
 |
qualidat
Dabei seit: 14.09.2006
Ort: Eichwalde bei Berlin
Alter: 63
Geschlecht:
|
Verfasst Do 23.01.2014 12:53
Titel
|
|
|
|
Ich hab ejetzt keine Lust/Zeit deinen Code zeilenweise durchzugehen, aber wo ist das Problem? Stoppe doch einfach immer alle Songs (egal ob sie wirklich laufen oder nicht), bevor du einen startest ... Die Player-IDs solltest du über einen Zugriff auf das DOM-Control-Array (getElementByType oder so ähnlich) auffinden und zum Schweigen bringen können ...
|
|
| |
|
|
|
Anzeige
|
|
|
DEKONSTRUKTIV
Dabei seit: 22.06.2009
Ort: bln
Alter: -
Geschlecht: -
|
Verfasst Do 23.01.2014 13:00
Titel
|
|
|
|
warum sollte da irgendwas stoppen? dein javascript tut nichts dergleichen.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Audio-Livestream
Audio Aufnehmen
imovie audio importieren
Live Audio Stream Lösung
Ladeanzeige für Flash Audio Player, wie?
Audio-Einbindung bei InDesign (Dringend!)
|
|
Willkommen auf dem Portal für Mediengestalter
