Amélioration script fonctionnant sur IE pour lecteur mp3 intégré accessible non-

Virlorigie Messages postés 9 Date d'inscription dimanche 20 mai 2007 Statut Membre Dernière intervention 10 juillet 2010 - 7 févr. 2010 à 19:51
inwebo Messages postés 381 Date d'inscription lundi 12 novembre 2007 Statut Membre Dernière intervention 23 octobre 2014 - 11 févr. 2010 à 11:30
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 "", insérer le code ci-après :

<object ID="Player" width="280" height="45" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">



</object>

4. Juste sous ce code, insérer le lien (rendu invisible) vers les contrôles pour mal-voyants :

Accéder aux contrôles de son pour déficients visuels

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 :

[# Intitulé du lien]



6. En fin de page, juste avant "", les contrôles pour non-voyants, (invisibles eux aussi) :



[# Volume +]
| [# Volume -]
| [# Pause]
| [# Stop]



Merci beaucoup de vos lumières et idées.

Bonne soirée.

5 réponses

pegase31 Messages postés 6138 Date d'inscription dimanche 21 décembre 2003 Statut Modérateur Dernière intervention 4 septembre 2013 11
7 févr. 2010 à 19:57
Bonsoir,

Quel est le rapport avec Flash et l'ActionScript ?

Peg'
0
Virlorigie Messages postés 9 Date d'inscription dimanche 20 mai 2007 Statut Membre Dernière intervention 10 juillet 2010
7 févr. 2010 à 20:01
Désolée... Le site a planté à l'envoi du premier message j'ai dû recommencer et j'ai oublié de choisir la bonne catégorie...
Je ne trouve pas le lien pour éditer mon message...

Si un modérateur passait par là, pourriez-vous déplacer ce sujet SVP dans la partie php/web 2.0/compatibilité des navigateurs ?

Merci beaucoup par avance et encore toutes mes excuses...
0
pegase31 Messages postés 6138 Date d'inscription dimanche 21 décembre 2003 Statut Modérateur Dernière intervention 4 septembre 2013 11
7 févr. 2010 à 20:10
Je te fais ça.

Peg'
0
Virlorigie Messages postés 9 Date d'inscription dimanche 20 mai 2007 Statut Membre Dernière intervention 10 juillet 2010
7 févr. 2010 à 22:39
Un grand merci à toi. ;)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
inwebo Messages postés 381 Date d'inscription lundi 12 novembre 2007 Statut Membre Dernière intervention 23 octobre 2014
11 févr. 2010 à 11:30
Plusieurs remarques :

La balise pour insérer du javascript est :
<script type= "text/javascript">
<![CDATA[
... unescaped script content ...
]]>
</script>

La balise pour le style CSS est :
<style type ="text/css">
style css
</style>

Pour que les naviguateurs évitent de suivre un lien qui active une fonction javascript il faut rajouter return:false;

Ex :

[# Volume +]
| [# Volume -]
| [# Pause]
| [# Stop]



Voilà si cela peut aider.

++
0
Rejoignez-nous