Bonjour,
Je voulais proposer à l'écoute sur mon site des musiques perso mp3 par le biais d'un lecteur intégré dans mon site. Or, j'aimerai que ce lecteur soit totalement accessible aux non-voyants donc qu'on puisse arrêter à tout moment la lecture d'une piste par échap, qu'on y trouve un bouton stop, pause/lecture et volume.
Quelqu'un de mon entourage m'a passé le code avec script ci-dessous incluant un lecteur accessible et vraiment ça marche vraiment bien bien avec Internet explorer, le résultat était comme je le souhaitais, j'ai testé sur une de mes pages, c'était l'idéal.
Malheureusement, cela ne fonctionne pas avec Firefox...
Sauriez-vous par tout hasard trouver la faille et m'aider à l'améliorer pour le rendre accessible avec Firefox ? Qu'est-ce qui bloque chez Firefox d'après vous ? Car sur Firefox, que ce soit pour un non-voyant ou pour n'importe qui, la lecture n'est tout simplement pas possible, on ne voit même pas le lecteur...
Voici le code :
1. Entre les balises "<head>" & "</head>", insérer le code ci-dessous :
<script>
function lecteur(filename) {
Player.URL = filename;}
function stop() {
document.Player.controls.stop();}
function volumeplus(v) {
document.getElementById('Player').settings.volume+=v;}
function Volumemoins(v) {
document.getElementById('Player').settings.volume+=v;}
function pause() {
if (document.Player.playState==3) {
document.Player.controls.pause();}
else {document.Player.controls.play();}}
</script>
2. Toujours entre ces mêmes balises "<head>" & "</head>", insérer le code ci-dessous :
<style>
a {color: black; text-decoration: none;}
span {position:absolute; left:-1000px; width:200px; overflow:hidden;}
div {position:absolute; left:-1000px; width:200px; overflow:hidden;}
</style>
3. Juste sous la balise "<body>", insérer le code ci-après :
<object ID="Player" width="280" height="45" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="volume" value="100">
<param name="autoplay" value="false">
<param name="loop" value="false">
</object>
4. Juste sous ce code, insérer le lien (rendu invisible) vers les contrôles pour mal-voyants :
<span><a href="#Controle">Accéder aux contrôles de son pour déficients visuels</a></span>
5. A l'endroit souhaité dans la page, insérer le lien qui déclenche la lecture du fichier. La subtilité est qu'il faut désigner ce dernier par son adresse internet. Dans le code qui suit, repérer :
onclick égal guillemet lecteur parenthèse ouvrante apostrophe
Changer l'intitulé du lien selon ce qu'on souhaite y faire figurer :
<p><a href="#" onclick="lecteur('http://MonNomDeDomaine.SonExtension/Dossier/NomDuFichier.SonExtension')">Intitulé du lien</a></p>
6. En fin de page, juste avant "</body>", les contrôles pour non-voyants, (invisibles eux aussi) :
<div>
<a name="Controle"></a>Contrôles pour non-voyants :
<a href="#" onclick="volumeplus(5)">Volume +</a>
| <a href="#" onclick="Volumemoins(-5)">Volume -</a>
| <a href="#" onclick="pause()">Pause</a>
| <a href="#" onclick="stop()">Stop</a>
</div>
Merci beaucoup de vos lumières et idées.
Bonne soirée.