Lecture audio | video

**Luke spywoker** · 28/10/2011, 14h05

Salut les HyperTexteurs j'ai un problème de Markup dans le language HTML5:
J'ai essayer la nouvelle balise de HTML5 <audio> mais sa ne fonctionne pas, au mieux sous windows, j'ai les widgets de controls mais dès qu'on appuie sur play sa loop indéfiniment sans jouer mon morceau test au format *.mp3 que firefox prétend supporter pourtant et sous Linux j'ai même pas les instruments de controls:
Voici mon audio test code:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='utf-8'>
<title>Audio test</title>
</head>
<body>
<audio controls='controls' preload='auto'>
<source src='file://chemin/vers/mon/fichier.mp3' type="audio/mp3">
Your browser does not support the audio element.
</audio> 
</body>
</html>

Est-ce-que cela vient du fait que je n'utilise pas de serveur pour afficher ma page test ou de la mauvaise prise en charge du navigateur ?

Alors que si j'ouvre le fichier avec firefox celui-çi joue le morceau avec les fractales animés en plein écran et la barre de controls.

Merci pour vos réponses.

**NoSmoking** · 28/10/2011, 18h38

Bonjour,
pas sûr que l'URL du fichier commençant par le protocol file: soit une bonne chose.

**Luke spywoker** · 30/10/2011, 10h34

J'ai essayer avec un serveur apache et l'url http://localhost/chemin/vers/mon/fichier.mp3 comme src, ca ne marche toujours pas.

**RomainVALERI** · 30/10/2011, 18h40

Je ne connais pas encore bien cette balise, je suis justement en train moi aussi de me dépatouiller avec les specs html5 pour essayer de voir ce qu'on peut en faire

Et puisque tu parles de balise audio, j'en utilise une mais en la créant coté JS : (extrait du code d'un objet d'où la notation mais ça n'a pas d'importance ^^)

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
   bruitPas: function() {
      var elem_audio = el("bruitPas");
      if (!elem_audio) {
         elem_audio = new Audio();
         elem_audio.src = "sons/pas." + ((priseEnChargeMp3) ? "mp3": "ogg");
         elem_audio.id = "bruitPas";
         elem_audio.autoplay = true;
         elem_audio.loop = false;
         elem_audio.controls = false;
      }
      elem_audio.load();
      elem_audio.play();
   }

Au cas où ça t'aide à avancer...

**NoSmoking** · 30/10/2011, 19h51

je voyais plutôt un chemin relatif type

Code :

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

<source src='chemin/vers/mon/fichier.mp3' type="audio/mp3">

en partant de là où ce trouve ton fichier html.

**Luke spywoker** · 31/10/2011, 10h36

Mon fichier audio et la page html qui doit jouer celui-çi ce trouve juste dans un sous répertoire de /var/www et avec le chemin relatif:

Code :

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

src='fichier.mp3'

ca ne marche pas non plus.

Quand on rappuie dans la barre d'adresse les controls s'affichent pendant une fraction de seconde puis disparaissent...

C'est quoi cet objet javascript:

Code :

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

elem_audio = new Audio();

Je ne savais pas qu'on pouvais créer un objet Audio pourtant j'ai appris avec un livre qui se dit etre "Le guide complet", pas si complet que sa apparement.

Je me suis donc empresser de faire un script qui boucle sur cet objet:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<script>
var a=new Audio() ;
for (data in a) {
document.write(a) ;
document.write(' : ')
document.write(a[data])
document.write('<br>')
}
</script>

et en copiant RomainVALERI

Code :

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

1
2
3
4
5
6
7
8
 
function test() {
var a=new Audio();
a.src='file:///chemin/vers/fichier.mp3';
a.controls=true;
a.load();
a.play();
}

Ca ne marche pas non plus.

**RomainVALERI** · 31/10/2011, 11h43

Envoyé par Luke spywoker

Je ne savais pas qu'on pouvais créer un objet Audio pourtant j'ai appris avec un livre qui se dit etre "Le guide complet", pas si complet que sa apparement.

J'ai tendance (à tort ou à raison ^^) à me référer aux specs.

**Luke spywoker** · 31/10/2011, 15h47

Ca va un peut mieux avec le lien de RomainVALERI, qui est d'ailleurs une excellente source, j'ai pu modifier mon test code :

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
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='utf-8'>
<title>Audio test</title>
<script>
function test() {
var a=new Audio('fichier.mp3');
a.controls=true;
a.load();
a.play();
}
</script>
</head>
<body>
<script>
test()
</script>
<audio controls="controls" preload='auto'>
  <source src='fichier.mp3' type="audio/mp3" />
  Your browser does not support the audio tag.
</audio> 
</body>
</html>

Les controls s'affichent mais quand on appuie sur play sa boucle indéfiniment sans jouer le morceau et les controls ne s'affichent plus si j'affecte la fonction test() a un évènement onclick dansla balise <audio>.

**NoSmoking** · 31/10/2011, 16h54

Envoyé par Luke spywoker

....indéfiniment sans jouer mon morceau test au format *.mp3 que firefox prétend supporter...

je n'ai pas trouvé trace du support par FireFox des fichiers au format mp3, ce serait même l'inverse https://developer.mozilla.org/en/Usi...Error_handling, il te faudra sûrement passé au fichier ogg.

**Luke spywoker** · 01/11/2011, 12h09

Bien jouer NoSmoking dans le format ogg ca joue le morceaux, merci pour le tuyau et le lien.

Bon l'audio c'etait pour tester les nouvelles balises <audio> (et <video> que je n'ai pas encore tester) du HTML5, mais je pense que si le format est respecter par rapport aux navigateurs c'est pareil que pour la balise <audio>: sa marche.

Dans l'objectif de fournir de la vidéo dans un site écrit en HTML 5, il faut que je trouve de la documentation analogue aux liens que vous m'avez gentillement donner, pour trouver le|les formats reconnus par les principaux navigateurs.

Grand merci a tous ceux qui ont participer a ce test de lecture fichier audio par HTML 5 pour leurs précieuse aide.

Lecture audio | video

HTML

Discussions similaires

Partager

Partager