HTML5/JavaScript audio playlist

Habe ich gefunden ein schönes tutorial auf, wie man eine playlist mithilfe von HTML5 und JavaScript in blog-post HTML5-Audio und-Video und wie man eine Wiedergabeliste. Ich bin den Anweisungen gefolgt, aber ich habe nicht das richtige Ergebnis.

Dieser code SOLLTE spielen alle drei audio-Dateien in Reihenfolge ab und Stoppt, wenn das Letzte Lied beendet hat, aber was es tatsächlich tut, ist die automatische Wiedergabe der ersten Datei, die dann Stoppt, wenn die erste Datei fertig ist. Was habe ich falsch gemacht?

<html>
    <body>
        <ul id="playlist">
            <li class="active">
                <a href="http://www.codenamejupiterx.com/song/soundtest.mp3">
                   soundtest
                </a>
            </li>
            <li>
                <a href="http://www.codenamejupiterx.com/song/soundtest2.mp3">
                    soundtest2
                </a>
            </li>
            <li>
                <a href="http://www.codenamejupiterx.com/song/soundtest3.mp3">
                    soundtest3
                </a>
            </li>
        </ul>

        <script>
            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();
            }
        </script>
    </body>
</html>

InformationsquelleAutor codenamejupiterx | 2013-01-01

5

1) JavaScript-code ist mit jQuery (diese $(...) - Anweisungen), so dass es importiert werden muss:
```
<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  </head>
<body>
...
```
2) Die audio HTML-element (die echten "player") wird vermisst:
```
<body>
  <audio id="audio" preload="auto" tabindex="0" controls="" >
    <source src="http://www.codenamejupiterx.com/song/soundtest.mp3">
  </audio>
...
```
3) Dem code spielen nur ZWEI songs. Zu Spiel DREI:
```
...
len = tracks.length; //"-1" removed
...
```
4) Dem code spielen wieder und wieder die drei songs. Um es zu stoppen:
```
audio[0].addEventListener('ended',function(e){
    current++;
    if(current < len){
      link = playlist.find('a')[current];   
      run($(link),audio[0]);
    }
});
```
- Vielen Dank Juan!!!! Aber eine Sache habe ich entfernt, die -1 aus dem len=track.Länge Linie, aber es spielt immer noch nur zwei Spuren....alle sugesgtions?
- es war mein browser safari 5, wenn ich ein Upgrade auf safari 6 es funktionierte wie ein Charme. Vielen Dank Juan!!!!
InformationsquelleAutor Juan Mellado

-1

Mithilfe von jQuery-ich habe das erreicht, indem mithilfe der folgenden Kontrolle.

Fügen Sie die audio-Control-tag mit folgenden Parametern:

<audio id="audio1" controls="controls" autoplay="autoplay">    </audio>

In JavaScript:

jQuery(function($) {
    var supportsAudio = !!document.createElement('audio').canPlayType;
    if (supportsAudio) {

        url = URL.baseUrl + Books + authors + "/" + subject + "/data.json";
        $.getJSON(url, function(data){
            console.log("ddd"+JSON.stringify(data));

            var index = 0,
            trackCount = data.URL.length,
                npAction = $('#npAction'),
                npTitle = $('#npTitle'),
                audioid = $('#audio1').bind('play', function() {
                }).bind('ended', function() {

                if((index + 1) < trackCount) {
                    index++;
                    loadTrack(index);
                    audioid.play();
                }
                else {
                    audioid.pause();
                    index = 0;
                    loadTrack(index);
                }
            }).get(0),
                loadTrack = function(id) {
                    index = id;
                    audioid.src = data.URL[index].ayah;
                };
            loadTrack(index);
        });
    }
});

Dies ist ein exaktes Duplikat dieses anderen Antwort von dir.
Das Skript ist voll von Referenzen auf Variablen, die nicht definiert wurde, in diesem Umfang (Books, authors, subject) sowie Annahmen über das DOM (#npAction, #npTitle). Dies braucht sehr viel mehr Erklärung, wenn es geht, hilfreich zu sein für andere.

InformationsquelleAutor Preejith augustine

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.