Ergebnis 1 bis 2 von 2
  1. #1
    Avatar von forutuna
    forutuna ist offline Grünschnabel
    registriert
    22-01-2014
    Beiträge
    4

    Audio-Datei stoppt bei Auwahl einer anderen Audio-Datei nicht

    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.

    PHP-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(numberdirection){
        if(
    activeSong.volume >= && direction == "down"){
            
    activeSong.volume activeSong.volume - (number 100);
        }
        if(
    activeSong.volume <= && 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.eventevent 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.eventevente;
        
    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:
    HTML-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>

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.678

    AW: Audio-Datei stoppt bei Auwahl einer anderen Audio-Datei nicht

    Im play() musst du doch einfach nur ganz am Anfang pause() aufrufen...

Ähnliche Themen

  1. audio datei
    Von baum94 im Forum CSS und (X)HTML
    Antworten: 5
    Letzter Beitrag: 12-02-2012, 13:08
  2. Elemente aus einer anderen Datei auslesen?
    Von TAiS46 im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 18-11-2007, 21:01
  3. Antworten: 1
    Letzter Beitrag: 17-07-2006, 15:21
  4. front panel usb und audio stecker passt nicht
    Von bine im Forum Allgemeines
    Antworten: 0
    Letzter Beitrag: 04-03-2006, 08:51
  5. Auf Quelltext einer anderen Datei verweisen
    Von selcuk im Forum Allgemeines
    Antworten: 1
    Letzter Beitrag: 27-11-2001, 13:13

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •