Ergebnis 1 bis 3 von 3

Thema: Audio-Player soll nicht automatisch gestartet werden.

  1. #1
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard Audio-Player soll nicht automatisch gestartet werden.

    Hallo zusannen,

    ich habe nachfolgenden HTML-Code und ein Script damit der Audio-Player eine Playlist bekommt, was soweit auch gut funktioniert. Nur möchte ich jetzt noch erreichen, dass der Audio-Player nach dem Aufrufen der Webseite nicht automatisch die Wiedergabe beginnt. Die Wiedergabe soll erst beginnen wenn aktiv der Play-Button betätigt wurde. Ich weiß nicht was ich im HTML-Code oder Script veränden muss, damtit der Autostart unterbunden wird. Meine bisherigen Versuche dazu sind alle fehlgeschlagen. Kann mir bitte jemand einen Tipp geben was ich verändern muss, damit mein Vorhaben gelingt.

    HTML-Code:
    <audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
        <source type="audio/mp3" src="xxx//Titel-1.mp3">
            Sorry, your browser does not support HTML5 audio.
    </audio>
    
    <ul id="playlist">
        <li class="active"><a href="xxx/Titel-1.mp3">Ravel Bolero</a></li>
        <li><a href="xxx/Titel-2</a></li>
        <li><a href="xxx/Titel-3</a></li>
    </ul>
    Code:
    var audio;
    var playlist;
    var tracks;
    var current;
    
    init();
    function init(){
        current = 0;
        audio = $('audio');
        playlist = $('#playlist');
        tracks = playlist.find('li a');
        len = tracks.length - 1;
        audio[0].volume = .10;
        audio[0].play();
        playlist.find('a').click(function(e){
            e.preventDefault();
            link = $(this);
            current = link.parent().index();
            run(link, audio[0]);
        });
        audio[0].addEventListener('ended',function(e){
            current++;
            if(current == len){
                current = 0;
                link = playlist.find('a')[0];
            }else{
                link = playlist.find('a')[current];    
            }
            run($(link),audio[0]);
        });
    }
    function run(link, player){
            player.src = link.attr('href');
            par = link.parent();
            par.addClass('active').siblings().removeClass('active');
            audio[0].load();
            audio[0].play();
    }
    Danke!


    Gruß
    Thomas

  2. #2
    Contao-Urgestein Avatar von zonky
    Registriert seit
    19.03.2010.
    Ort
    Berlin, Rdf
    Beiträge
    9.719
    User beschenken
    Wunschliste

    Standard

    Code:
    var audio;
    var playlist;
    var tracks;
    var current;
    
    init();
    function init(){
        current = 0;
        audio = $('audio');
        playlist = $('#playlist');
        tracks = playlist.find('li a');
        len = tracks.length - 1;
        audio[0].volume = .10;
        //audio[0].play(); // Autoplay
        playlist.find('a').click(function(e){
            e.preventDefault();
            link = $(this);
            current = link.parent().index();
            run(link, audio[0]);
        });
        audio[0].addEventListener('ended',function(e){
            current++;
            if(current == len){
                current = 0;
                link = playlist.find('a')[0];
            }else{
                link = playlist.find('a')[current];    
            }
            run($(link),audio[0]);
        });
    }
    function run(link, player){
            player.src = link.attr('href');
            par = link.parent();
            par.addClass('active').siblings().removeClass('active');
            audio[0].load();
            audio[0].play();
    }

  3. #3
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard

    Vielen Dank für die Unterstützung, jetzt funktioniert es einwandfrei und die Autoplay Funktion ist beim Aufruf der Webseite abgeschaltet.

    Gruß
    Thomas

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

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