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

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="mymp3.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.

À lire aussi :
Laissez un commentaire !

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