Play Stop

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.

Play Stop

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.

Autres articles

	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
	Créer un site web : Tutoriel complet Créer, designer, héberger, rentabiliser
	Massage Drôle de surprise !
	Sea Ranch : la côte californienne nord contre vents et marées
	Mes iPhone App JapanEasy, Wormwar et tout ce qu'il y a à savoir sur les apps
	Fabrication des iPhone Apps Vue de derrière les coulisses
	Big brother is watching you Les gens c'est de l'argent
	Pharmacie japonaise mode d'emploi
Url propres avec .htaccess / Minimal urls using .htaccess Un peu d'aide sur .htaccess ça ne se refuse pas ! Who doesn't need a little help with .htaccess :)
	Tutoriel AppleScript Les bases pour créer une belle app en AppleScript + astuces et codes sources
	Las Vegas 'What happens in Vegas stays in Vegas'
	Tokyo !! arrivée à Tokyo
	Tsuyu (梅雨) la saison de la pluie
11 heures d'avion Il peut s'en passer des choses en 11 heures...
	Niigata week-end découverte
	Acheter une voiture d'occasion aux USA : Saison 1 Une série qui démarre sur les chapeaux de roues
	箱根 (Hakone) Nuits chaudes et bains chauds
	Night Call Du sombre dans les salles sombres
	Salon de l'auto Une petite virée au salon de l'Auto 2008