Discussion :

[loiseau.funambule]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Invité]

salut,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

next = next %3

qui t'assure de jamais atteindre 3...

parenthèse à part

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

    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 :

Sélectionner tout - Visualiser dans une fenêtre à part

var urls = []

3 : tu peux directement construire ton tableau

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var urls = [
  'http://www....01.mp3',
  'http://www....01.mp3',
  'http://www....01.mp3'
];

[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

[SylvainPV]

Remplace la ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

next++

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[loiseau.funambule]

voici le code retouché :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SylvainPV]

Il semble que la dernière ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var next =0;

soit passée à la trappe

[loiseau.funambule]

ca marche pas non plus avec cette variable...

[SylvainPV]

hmmm... peux-tu être plus précis que ça marche pas ? Un message en console peut-être ?

[loiseau.funambule]

Il n'y a aucun son.

[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...

[Invité]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

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

[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

[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

[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