Discussion :

[xoorus]

Bonjour à tous,
Je voudrais permettre à un utilisateur de changer de musique lors d'une action.

Je dispose du code suivant dans ma page html :

Code html :

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

1
2
3
4
5
<audio controls id="webaudioplayer" autoplay>
    <source id="audio-mp3" src="audio/1.mp3" type="audio/mpeg">
    <source id="audio-wav" src="audio/1.wav" type="audio/wav">
    Your browser does not support the audio tag.
</audio>

l'idée est d'utiliser mon bout de code javascript pour modifier les contenus des sources pour relancer une autre musique à la place

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var audio = {
    sounds:Array('audio/1','audio/2','audio/3','audio/4'),
    now:0,
    play:function(){
    	$("#audio-mp3").attr("src",'audio/2.mp3');
    	$("#audio-wav").attr("src",'audio/2.wav');
    	var audio = $("#webaudioplayer");
    	//audio.play();
    },
    next:function(){
      //todo
    }
}

Pour l'instant, l'idée est juste de passer à la chanson 2, mais ma console me retourne l'erreur

TypeError: Object [object Object] has no method 'play'

Une idée ?

[TiranusKBX]

bonjour à toi

pour information on ne met pas d'id au balises sources
ensuite on charge l'audio en javascript en fonction du format supporté par le navigateur directement dans l'objet audio

Code Javascript :

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

1
2
3
4
5
 
if(document.getElementById('webaudioplayer').canPlayType('audio/mpeg'))
{$("#webaudioplayer").attr("src",'audio/2.mp3');}
else
{$("#webaudioplayer").attr("src",'audio/2.ogg');}

quand au format wav je l'ai jamais vus dans les listes de support

[xoorus]

Pour le wav, j'avais trouvé ici la liste des types supportés en fonction des navigateurs (pour info)

http://www.w3schools.com/tags/tag_audio.asp

Je test cela, merci

[xoorus]

ça fonctionne, merci !

[Bovino]

TypeError: Object [object Object] has no method 'play'

Quant à cette erreur, elle est due au fait que dans ton code, la variable audio est un objet jQuery et non un objet du DOM du type HTMLAudioElement. Elle ne possède donc pas, comme l'indique le message, de méthode play().
Tu peux faire à la place (parmi une multitude de solutions possibles) :

Code :

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

1
2
var audio = $("#webaudioplayer");
audio[0].play();

pour information on ne met pas d'id au balises sources

Rien ne l'interdit. id est un attribut générique et toutes les balises peuvent avoir un id.

[TiranusKBX]

Rien ne l'interdit. id est un attribut générique et toutes les balises peuvent avoir un id.

peut être mais dès que tu change la source inutile d’espérer que le dom te les retournent ^^