Site Perso de

Thomas JANNAUD

Des actualités personnelles sous un style impersonnel, et inversement.



Comment jouer un son en javascript / How to play a sound with javascript
In French and English 22 Décembre 2008

Une petite astuce pour jouer un son avec Javascript que l'on vient de découvrir. Vous savez sans doute qu'une manière valide W3C de lire de la musique (purement HTML) est celle-ci :

<object type="audio/mpeg" width="100" height="40" data="monmp3.mp3">
<param name="filename" value="monmp3.mp3" />
<param name="autostart" value="true" />
<param name="loop" value="false" />
</object>

L'astuce consiste à voir que si l'on met ce code, ça joue la musique, et si on le retire, ça ne joue rien, et si l'on met ce code avec autostart="false" ça télécharge la musique, mais ça ne la joue pas. Il faut donc s'amuser avec ça en Javascript pour arriver à l'effet désiré.

Pour ce faire, on met ce code HTML dans <div id="divmusic"> avec autostart = false, comme ça la musique se télécharge automatiquement sans se jouer. Au clic sur le bouton "Play", on met autostart = true et ça joue. Pour ce faire, en pratique on réécrit tout le 'object' dans le innerHTML du div avec autostart = true. Pour arrêter la musique, on supprime l'objet (pratiquement : innerHTML = '').

Référez vous au script dans le code source de la page pour voir comment c'est fait.


We have found a simple way to play music with Javascript. Maybe you already know that this HTML code plays music automatically and is W3C valid :

<object type="audio/mpeg" width="100" height="40" data="monmp3.mp3">
<param name="filename" value="monmp3.mp3" />
<param name="autostart" value="true" />
<param name="loop" value="false" />
</object>

If you don't have this code on your page, no music is played, and if you have this code but with the attribute autostart="false", then the music is downloaded but is not played either. Javascript will help you toy with these properties.

So the trick consists in writing this code in <div id="divmusic"> with autostart = false so that the browser downloads the music but doesn't play it. A div helps you control efficiently what is inside.

Then to play the song write in Javascript : innerHTML = 'the big object on one single line with autostart = true'. To stop the music, innerHTML = ''. (where innerHTML applies to divmusic)

What happens is :
1) the music is loaded but not played (autostart = false)
2) to play : you change the attribute autostart simply by rewriting the whole html code, with autostart="true"
3) you stop the music by deleting the code.

You can find an example in the source code of this page.

Laissez un commentaire !

Pas besoin de vous connecter, commencez à taper votre nom et une case "invité" apparaîtra.

Editeur hexadécimal
Comment s'en servir + exemple avec images Bitmap
Accusé de réception / Email read notification
Activer l'accusé de réception dans Mail.
Activate the email read notification in Mail.
Latex
Utiliser Latex avec XCode
Write Latex with XCode
Fichiers Wav
Format, spécifications et code source C++ générant un .wav
Couleurs
Fonctionnement des couleurs sur un ordinateur, et transformation HLS<->RGB
Snippets utiles pour iOS Cocoa - Useful Cocoa snippets
Courts et efficaces / Short and simple. In French and English
Driving license
Un pas de plus vers la citoyenneté américaine !
L'Equateur vu des andes
T'as qu'à tout quitter
Concept boutique
La véritable histoire de la voiture télécommandée
10 jours dédiés au Guatemala
A la rencontre des familles mayas
Loi contre le téléchargement illégal
Le Sénat vient de voter la loi d'Albanel. Qu'en pensez-vous ?
Ces curiosités en Alaska
14 étrangetés que les touristes remarquent tout de suite
La maison des tartes
Une de mes petites adresses, rue mouffetard
Voyage en Islande
Sur les traces des vikings
Kyoto - la vie ici
train train quotidien en famille d'accueil
Configurer ses sauvegardes
Du bon usage de DropBox, disques durs externes, des gestionnaires...
Boycott des J.O de Pékin ?
Pour ou contre un boycott de la cérémonie d'ouverture des JO de Pekin ?
Le Japonais
Retour sur une expérience peu commune
Exposition Hugo Pratt
à la pinacothèque
Happy few
Un film détonnant
Alcatraz
un petit tour sur cette île mythique
Soirée au café-théâtre
Le Matana (Paris 5ème), un café à découvrir ?
Fils RSS
qu'est ce qu'un fil RSS et comment en créer ?
Niigata
week-end découverte