Playlist fonction next en boucle

Version imprimable

bonjour à tous,
quelqu'un pourrait il me guider, j'essaye de faire évoluer ce script dans le sens ou j'aimerai avoir un simple bouton NEXT qui lit des chansons, mais en boucle.
c'est à dire lecture des sons 1, 2, 3, puis 1, 2, 3...
je débute, c'est pas facile, merci !
philipe

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script type="text/javascript">
    function loadPlayer() {
        var audioPlayer = new Audio();
        document.getElementById("player").appendChild(audioPlayer);
        nextSong();
    }
    function nextSong() {
        if(urls[next]!=undefined) {
            var audioPlayer = document.getElementsByTagName('audio')[0];
            if(audioPlayer!=undefined) {
                audioPlayer.src=urls[next];
                audioPlayer.load();
                audioPlayer.play();
                next++;
            } else {
                loadPlayer();
            }
        } 
    }
    function stopSong() {
        var audioPlayer = document.getElementsByTagName('audio')[0];
  audioPlayer.pause();
    }
    var urls = new Array();
    urls[0] = 'http://www....01.mp3';
    urls[1] = 'http://www....02.mp3';
    urls[2] = 'http://www....03.mp3';
    var next = 0;
</script>
<div id="player"></div>
<a href="#" onclick="nextSong()">NEXT</a>
<a href="#" onclick="stopSong()">STOP</a>

11/11/2014, 17h40
Invité
salut,

pour tourner en boucle 0,1,2, tu n'as qu'à considérer

Code:

next = next %3

qui t'assure de jamais atteindre 3...

parenthèse à part

Code:

var urls = new Array();

1 : le new n'est pas nécessaire pour Array
2 : il n'est pas non plus nécessaire de déclarer Array si tu ne lui donnes pas de taille, idem

Code:

var urls = []

3 : tu peux directement construire ton tableau
Code:

1 2 3 4 5 var urls = [ 'http://www....01.mp3', 'http://www....01.mp3', 'http://www....01.mp3' ];
12/11/2014, 12h18
loiseau.funambule

Merci beaucoup,
Par contre je n'arrive pas à trouver ou placer next = next %3 dans le script,
De la même manière si j'enlève Array, et que je réécris les URL de cette façon, je n'ai plus de son du tout.
Philippe
12/11/2014, 13h20
SylvainPV

Remplace la ligne

Code:

next++

par

Code:

next = (next+1) % urls.length

donne-nous le code complet retouché, tu as dû te tromper dans la déclaration littérale de la liste d'URL.

voici le code retouché :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function loadPlayer() {
    var audioPlayer = new Audio();
    document.getElementById("player").appendChild(audioPlayer);
    nextSong();
}
function nextSong() {
    if(urls[next]!=undefined) {
        var audioPlayer = document.getElementsByTagName('audio')[0];
        if(audioPlayer!=undefined) {
            audioPlayer.src=urls[next];
            audioPlayer.load();
            audioPlayer.play();
            next = (next+1) % urls.length;
        } else {
            loadPlayer();
        }
    } 
}
function stopSong() {
    var audioPlayer = document.getElementsByTagName('audio')[0];
    audioPlayer.pause();
}
var urls = [
  'http://www....01.mp3',
  'http://www....02.mp3',
  'http://www....03.mp3'
];

Code:

1
2
3
<div id="player"></div>
<a href="#" onclick="nextSong()">NEXT</a>
<a href="#" onclick="stopSong()">STOP</a>

12/11/2014, 16h43
SylvainPV

Il semble que la dernière ligne

Code:

var next =0;

soit passée à la trappe :aie:
12/11/2014, 16h54
loiseau.funambule

ca marche pas non plus avec cette variable...
12/11/2014, 17h50
SylvainPV

hmmm... peux-tu être plus précis que ça marche pas ? Un message en console peut-être ?
12/11/2014, 18h18
loiseau.funambule

Il n'y a aucun son.
12/11/2014, 18h20
loiseau.funambule

même en pointant sur des URL dont les liens fonctionnent, du coup je ne comprends pas.
visiblement, j'avais au moins un premier son avec array.
bref je suis pas un as côté codage...

voici un exemple qui marche avec [] à la place de array

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
function loadPlayer() {
        var audioPlayer = new Audio();
        document.getElementById("player").appendChild(audioPlayer);
        nextSong();
    }
    function nextSong() {
        if(urls[next]!=undefined) {
            var audioPlayer = document.getElementsByTagName('audio')[0];
            if(audioPlayer!=undefined) {
                audioPlayer.src=urls[next];
                audioPlayer.load();
                audioPlayer.play();
                next++;
            } else {
                loadPlayer();
            }
        } 
    }
    function stopSong() {
        var audioPlayer = document.getElementsByTagName('audio')[0];
  audioPlayer.pause();
    }
    var urls = [
  'http://upload.wikimedia.org/wikipedia/en/0/04/Rayman_2_music_sample.ogg',
  'http://upload.wikimedia.org/wikipedia/en/9/9f/Sample_of_%22Another_Day_in_Paradise%22.ogg',
    ]
    var next = 0;

voici le meme exemple avec next % urls.length

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
function loadPlayer() {
        var audioPlayer = new Audio();
        document.getElementById("player").appendChild(audioPlayer);
        nextSong();
    }
    function nextSong() {
        if(urls[next]!=undefined) {
            var audioPlayer = document.getElementsByTagName('audio')[0];
            if(audioPlayer!=undefined) {
                audioPlayer.src=urls[next];
                audioPlayer.load();
                audioPlayer.play();
                next = (next+1)%urls.length; //<================
            } else {
                loadPlayer();
            }
        } 
    }
    function stopSong() {
        var audioPlayer = document.getElementsByTagName('audio')[0];
  audioPlayer.pause();
    }
    var urls = [
  'http://upload.wikimedia.org/wikipedia/en/0/04/Rayman_2_music_sample.ogg',
  'http://upload.wikimedia.org/wikipedia/en/9/9f/Sample_of_%22Another_Day_in_Paradise%22.ogg',
    ]
    var next = 0;

inutile de créer le noeud audio en javascript sil n'y en a qu'un

Code:

1
2
3
4
5
 
var audioTag = document.getElementsByTagName('audio')[0];
<div id="player">
<audio></audio>  
</div>

inutile de .load la music car play load également la musique.
(load sert si tu veux mettre en buffer la suivante pendant que la courante joue par exemple)

Code:

1
2
3
4
 
  audioTag.src=urls[next];
  audioTag.load();//useless
  audioTag.play();

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<html>
<div id="player">
<audio></audio>  
</div>
<a href="#" onclick="nextSong()">NEXT</a>
<a href="#" onclick="stopSong()">STOP</a>
<script type="text/javascript">
var audioTag = document.getElementsByTagName('audio')[0];
var urls = [
  'http://upload.wikimedia.org/wikipedia/en/0/04/Rayman_2_music_sample.ogg',
  'http://upload.wikimedia.org/wikipedia/en/9/9f/Sample_of_%22Another_Day_in_Paradise%22.ogg',
];
var next = 0;
function nextSong() {
  if(urls[next]!=undefined) {
    audioTag.src=urls[next];
    audioTag.play();
    next = (next+1)%urls.length;
  } 
}
function stopSong() {
  audioTag.pause();
}
</script>
</html>

Citation:

bref je suis pas un as côté codage...

et t'en deviendras probablement jamais un en js, si tu utilises pas les bons outils. Installes firebug (ou l'équivalent sous chrome) et regarde les erreurs que tu as dans ta console. Savoir que ca marche pas c'est un bon réflexe, mais pour pouvoir comprendre il faut au moins que tu aies la raison de l'erreur...chose qu'une page blanche ou une absence de son ne t'apprend pas :mrgreen:

13/11/2014, 09h57
loiseau.funambule

Merci beaucoup,

Ce code correspond tout à fait !

Par contre j'ai cru comprendre que Safari utilisait des mp3,

Il faut que je trouve maintenant comment faire coexister les deux formats.

Si vous avez une piste de départ je veux bien,

Bonne journée,

Philippe
13/11/2014, 11h59
Invité

http://www.w3schools.com/html/html5_audio.asp
tu as juste à servir le content-type approprié côté serveur
vu que Safari est pas capable de gérer l'ogg, alors soit tu pénalises safari en filtrant les musiques au format ogg, soit tu converties toutes tes musiques au format mp3
13/11/2014, 14h16
loiseau.funambule

Merci,
Par contre, je ne sais pas vous, mais la dernière version de firefox 33.1 lit les mp3 !!!
Enfin j'ai du son avec le script pointant sur des url mp3...
Et vous ?
Cordialement,
Philippe