Test html5 audio

Ce n'est pas un hasard. Je me sens tout floppy, je rêvasse, m'imagine des envies d'écrire, mais que dire, qu'aborder ? Bon, il y a bien quelques photos récentes sur imagiGor, mais guère plus. C'est les vacances. C'est la vie. Un temps pour tout. Un hiver qui s'avance tout à fait masqué, peut-être a-t-il été kidnappé ?

Alors, c'est un moment intéressant pour faire des tests. Parce qu'on peut espérer que l'avenir proche du web, si les "ayants-droits" et leurs sbires - les gouvernements, ceux qu'on élit - ne réussissent pas à le détruire, et ben ce web sera libéré du flash®. Autant s'y mettre... ! Surtout que depuis un mobile ou une tablette, le flash® c'est pas terrible, voir inexistant.

Tout d'abord, une version proposée par le plugin wordpress oEmbed HTML5 audio :
Get That (Instrumental) - Madlib's production, dans l'ablum Classic de M.E.D..
http://id-libre.org/blogigor/data/images/2012/01/04-Get-That.ogg
C'était un fichier .ogg
http://id-libre.org/blogigor/data/images/2012/01/04-Get-That.mp3
Et là, une version .mp3

Et si on tentait le coup avec la balise html5 "audio", sans l'aide du plugin ?



A noter qu'il est possible de télécharger le fichier au moyen d'un clic-droit sur le lecteur. Ou en affichant le code source de la page. Il est possible, du moins sans passer par le plugin, d'intégrer un attribut "title" qui permet d'indiquer quel est le morceau en question, si le curseur est laissé sur le lecteur.

Si l'envie vous prend de laisser en commentaire ce que ça donne chez vous, depuis quel système, quel navigateur... ce sera apprécié.

Sources : wiki du W3C

23 commentaires

#1 : 2012-01-11 @ 22:31
Laurence a dit :

Bon et bien je ne suis pas sûre d'avoir tout compris ... Mais bon, je te donne mes indications : tout fonctionne chez moi. J'ai safari et je suis sur mac.

Bonne soirée :)
Laurence

#2 : 2012-01-17 @ 17:56
iGor milhit a dit :

C'est cool. Merci du retour ! :-)

#3 : 2012-02-02 @ 15:13
anonyme a dit :

Affichage normal pour du html5, petit lecteur intégré etc

Dans tous les cas.

Iceweasel 3.6.24 (debian squeeze)

Sur ce jvais voir les photo, ca a l'air sympa :)

#4 : 2012-02-02 @ 15:40
iGor milhit a dit :

Hello. Merci pour le retour!
Tu connais un plug-in wordpress pour des commentaires sans demande inutile ? :)

Quand à Piwigo, j'ai pas trouvé un moyen de me protéger du spam, alors y a pas possibilité de commenter...

#5 : 2012-02-02 @ 17:26
anonyme a dit :

Nop.

Il doit en exister avec une validation par mail peut etre? (on autorise une fois une @mail, ca règle au moins pour les visiteurs/commentateur habituels)

Après je sais pas, il me semble qu'il y a un antispam mais j'ai pas essayer (Akismet), doit y avoir aussi les solutions du style captcha mais bon.

Pour revenir sur les médias, ya celui ci qui a l'air pas mal:

Secure HTML5 Video Player

Et peut etre JW Player Plugin for WordPress

Sinon on reste sur les balises html5 et tant pis pour ceux qui ont des navigateurs web obsolètes :p (sur iceweasel 3.6 le webm par exemple ne passe pas a priori, mais j'imagine que ca doit etre régler dans les suivants)
Tiens en passant, j'ai peut etre zappé un de tes exemple, tu en a mis 3 c'est ca?
Bon alors je ne vois pas le 2e donc, le .mp3 j'imagine.
Je ne sais pas trop pourquoi, j'ai bien les 3 lecteur avec konqueror, epiphany, dans le cas de iceape j'ai la croix d'erreur du lecteur html embarqué, le même que pour firefox (plutot logique) bon et avec midori j'ai le même lecteur merdique qu'avec epiphany :p

Wordpress Video Plugin est très bien pour intégrer les video depuis des sites comme youtube, vimeo, dailymotion etc

Vla :)

#6 : 2012-02-02 @ 19:21
iGor milhit a dit :

Oui j'ai mis 3 exemples. Les deux premiers avec le plug-in oEmbed HTML5 audio. Si le navigateur ne supporte pas l'élément html5, c'est un lecteur flash qui est proposé.
Et le 3e avec les balises.
Avant, j'avais l'habitude d'utiliser un plug-in qui transforme les liens .mp3 en lecteur flash (le JW player dont tu parles).
Récemment j'ai vu qu'on pouvait installer sur un desktop un Opera-mobile et je m'aperçois qu'il n'aime pas trop le html5.
En fait j'utilise plus ce truc sur id-libre's muzik. Faudrait que je prenne le temps de bien la maîtriser cette balise audio, parce qu'il y a de quoi faire j'imagine.

Et pour le commentaire sur Piwigo, faut que je m'en occupe sérieusement. Mise à jour du logiciel et recherche des 2 bons plug-in. En tout cas, sympa d'avoir un peu échangé avec toi.

#7 : 2012-02-02 @ 21:55
anonyme a dit :

Itou!

De rien :)

#8 : 2012-02-03 @ 22:50
GarsDePassage a dit :

Chez moi,

midori 0.4.3, sous Debian,

Avec le plugin wordpress,
Le 1er en ogg ne fonctionne pas, bizarre.
Le 2nd en mp3 fonctionne.

La balise html5 m'affiche un bout de code html, donc ne fonctionne pas.

Et oui, midori caca, mais ça évoluera sûrement.

#9 : 2012-02-04 @ 09:52
iGor milhit a dit :

Et un retour de plus. Merci !

#10 : 2012-03-04 @ 13:58
antistress a dit :

tu peux mettre des sources alternatives dans une même balise, par exemple : mp3, à défaut ogg. Afin de servir aussi bien Safari (compte tenu du refus des formats libres par Apple) que les autres
J'ai compilé des ressources ici si tu veux http://libre-ouvert.toile-libre.org/?article16/tests-audio-et-video
Très beau blogue au passage :-)

#11 : 2012-03-04 @ 14:12
iGor milhit a dit :

Woav ! Un commentaire du grand Antistress en ces lieux ! Chouette ;)
Oui, c'est ce que je fais dorénavant, les deux sources : OGG et MP3. Et si des visiteurs utilisent encore des navigateurs qui ne savent pas quoi faire de balises html5, je peux pas faire grand chose... :)
Reste que les ressources listées sur ton blog ont l'air bien utiles et intéressantes. Je vais aller fouiller cela.

Et merci pour le jugement de valeur (positif) !

#12 : 2012-03-06 @ 15:51
iGor milhit a dit :

euh... question aspect esthétique du blog, je viens de changer le thème ! minisch

#13 : 2012-03-06 @ 18:11
antistress a dit :

Je parlais autant de la forme que du contenu :-)
J'ai récupéré Valse avec Bashir j'ai hâte de le voir suite à ton dernier billet...

#14 : 2012-03-06 @ 18:14
antistress a dit :

Les navigateurs qui ne gèrent pas la balise audio/video afficheront le texte alternatif si il existe. Donc tu peux mettre le lien de téléchargement en texte alternatif si tu veux peaufiner... ça fait un peu de boulot en plus par contre ;-)

#15 : 2012-03-06 @ 19:51
iGor milhit a dit :

Pour cette histoire de texte alternatif, il faut que j'étudie un peu le truc, mais ce que j'ai constaté dans l'utilisation ici sur wordpress, c'est que si je mets le fichier OGG + MP3, alors le texte alternatif est forcément affiché si un des deux formats n'est pas supporté, chose que je n'ai pas constaté sur un blog pluXml. J'aurais trouvé chouette que si un des deux fichiers est reconnu qu'il n'affiche rien d'autre... Mais y a peut-être une erreur de code aussi. Je maîtrise pas bien ce qu'il se passe au niveau du html entre l'éditeur visuel et l'éditeur html dans wordpress...
Mais c'est vrai que l'idée du lien vers le fichier audio est intéressante. Pour le boulot en plus, ben il suffit d'enregistrer le bout de code, comme un modèle, à quelque part et de changer les sources et liens...

J'espère que tu apprécieras Valse avec Bashir...

#16 : 2012-06-04 @ 11:35
kals a dit :

bon artcile mais le telechargment du fichier ne marche chez est ce que quelqu un a une idée comment faire le telechargement

#17 : 2012-06-04 @ 11:43
iGor milhit a dit :

Normalement, il suffit de faire un clic droit sur le lecteur et "enregistrer le fichier audio sous... "
Au alors, une autre technique est d'afficher le code source de la page et on trouve tous les liens nécessaires.

Je dis ça par acquis de conscience, mais... j'avais comme un doute sur la validité du commentaire. :)

#18 : 2012-06-04 @ 16:34
kals a dit :

merci moi je pensais plutôt a faire un lien téléchargement a coté du lecteur si on veut télécharger on clique sur le lien et le téléchargement se lance mais malheureusement j essaye sans succès, si quelqu'un a une idée comment le faire merci d avance

#19 : 2012-06-04 @ 20:41
iGor milhit a dit :

Ah. En fait ta question est : comment permettre à un utilisateur de télécharger facilement le fichier que le lecteur permet de lire, en proposant un lien ?
Si c'est bien cela, alors je fais un code du genre :

 >audio controls="controls" title=""<

		>source src="https://id-libre.org/blogigor/2" type="audio/ogg; codecs=vorbis"<

		>source src="https://id-libre.org/blogigor/3" type="audio/mp3"<

		Ton navigateur ne supporte pas la balise audio html5 ? >a href="https://id-libre.org/blogigor/4" title="5"/a<.

>/audio<

>a href="https://id-libre.org/blogigor/4" title="5"/a<


J'ai mis les < et > à l'envers en espérant que ça affiche qqch...
Tu peux télécharger un fichier txt qui te donneras le code de manière plus lisible, j'espère : le fichier txt.

Tu peux voir une réalisation de ce code à la page /me, par exemple.

#20 : 2012-06-05 @ 12:30
kals a dit :

merci de ton aide j ai essai ton code toujours sans succès, lorsque je clique sur mon lien télécharger ça me redirige vers une autre page avec message undefined pourtant j arrive a lire le fichier

#21 : 2012-06-05 @ 20:17
iGor milhit a dit :

Il serait bien de préciser de que tu veux faire. Le lien doit pointer vers le fichier dont tu veux autoriser le téléchargement. Pour le télécharger, je vois pas trop d'autre moyen que de faire un clic droit et demander d'enregistrer le fichier sous...
Si le lien pointe vers un fichier son et que le navigateur dispose d'un plug-in permettant la lecture, il va être lu dans le navigateur si on clic sur le lien. Si ce n'est pas le cas, le navigateur devrait proposer de l'ouvrir avec une application ou de l'enregistrer sur le disque.
Autrement, tu pourrais mettre le fichier dans une archive .zip, et le navigateur va forcément proposer de télécharger.

#22 : 2012-06-06 @ 10:36
kals a dit :

merci beaucoup , ce que je veux faire c est de faire un téléchargement forcé , c est a dire avoir un lien télécharger si je veux je le télécharger sans passer par clic droite enregistrer sous .

#23 : 2012-06-06 @ 14:32
iGor milhit a dit :

Alors je proposerais le .zip

Fil RSS des commentaires de cet article

No comment.