Amélioration script fonctionnant sur IE pour lecteur mp3 intégré accessible non-
Virlorigie
Messages postés9Date d'inscriptiondimanche 20 mai 2007StatutMembreDernière intervention10 juillet 2010
-
7 févr. 2010 à 19:51
inwebo
Messages postés380Date d'inscriptionlundi 12 novembre 2007StatutMembreDernière intervention23 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 :
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) :
Virlorigie
Messages postés9Date d'inscriptiondimanche 20 mai 2007StatutMembreDernière intervention10 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...