2010-06-10 7 views
3

Quelle est la meilleure solution pour lire un fichier audio avec la souris via JavaScript? Et arrête quand la souris quitte le lien. jQuery est disponible.Lecture d'un fichier audio en survol (et arrêt de la lecture au passage du curseur)

<a href="/test.mp3" class="play">play</a> 
+3

En tant que membre de l'humanité, je vous demande de faire au moins un événement «clic». –

+0

En tant que fan de clear (HT) Markup Language, je veux garder ce lien vers un fichier audio. Ajouter juste un peu de fantaisie JS ... – powtac

+0

Je pense que vous avez manqué mon point, en majorité, les utilisateurs préfèrent ne pas avoir un démarrage sonore en déplaçant simplement leur souris sur la page, il * devrait * être un clic, pas un vol stationnaire. Pourquoi pensez-vous que les publicités flash avec un volume élevé disparaissent et que l'utilisation des bloqueurs de publicités/flashs monte en flèche? Une grande partie du même raisonnement s'applique ici ... juste quelque chose que vous devriez considérer. –

Répondre

1

http://www.schillmania.com/projects/soundmanager2/
Fournit HTML5 + prise en charge héritée

+0

SoundManager est un peu lourd. Aucune autre suggestion? – powtac

+0

J'ai vu cela utilisé bien dans un développement de jeux différents événements +1, cela fonctionne - Je n'ai aucune idée sur les autres alternatives. Je suis également intéressé s'il y a une solution minimaliste. – hhh

1
<script type="text/javascript"> 
    (function($) { 
     $(function(){ 
       $("a.play").each(function() { 
        $(this).mouseover(function(){ 
         var mp3file = $(this).attr('href'); 
         // asign this mp3file to the player and play it 
        }).mouseout(function() { 
         // tell the mp3 player to stop 
        }); 
       }); 
     }); 
    })(jQuery); 
</script> 

vous pouvez utiliser le lecteur que unomi suggéré. fonctionne très bien

+2

2 Choses ici, il y a une fonction '.hover()' que vous devriez extraire, et il n'y a jamais besoin de '.each()' lors de la liaison, appelez simplement $ ("a.play"). Click() ' par exemple, il va lier chacun des matches pour ce sélecteur :) –

+0

Merci Nick, j'ai oublié de hover! – powtac

+0

@NickCraver est-il possible de trouver une solution de rechange? Je n'aime pas que le répondeur n'ait pas amélioré sa réponse après votre commentaire. Cela rendrait cette écriture de meilleure qualité. – hhh

3
<audio id="mysound" src="mysound.wav"></audio> 
<button onmouseover="document.getElementById('mysound').play()" onmouseout="document.getElementById('mysound').pause()">Hover me!</button>