Jouer le plug-in jQuery audio basé sur les compétences du didacticiel audio HTML5 element_html5

1. Quelques discussions précédentes
Quand j'étais à l'université, il semblait que les sites Web Flash étaient encore un peu populaires, et sur tout site Web Flash avec du contenu, divers effets sonores étaient toujours indispensables. Une partie des effets sonores est constituée de musique de fond qui améliore l'atmosphère, et l'autre partie est constituée de sons interactifs qui favorisent l'interaction et améliorent l'expérience, tels que les pressions sur des boutons ou les sons de « bip » ou de « bip » lors du passage. À cette époque, il y avait peu d'interactions sonores sur les pages Web loin de Flash, même si, pour obtenir la compatibilité, il fallait s'appuyer sur des contrôles ou interagir avec Flash (par exemple, un jeu pour retard mental que j'avais écrit avant l'implémentation). du bruit d'explosion d'une bombe à neutrons frappant sa cible).

Marx nous a dit que les choses évoluent. Les filles deviendront un jour des jeunes femmes, et il en va de même pour la technologie. Par exemple, Gary Kwicks, PDG de Mozilla, a révélé aujourd'hui que Firefox 5 sera officiellement publié le 22 juin, soit seulement 3 mois après la sortie de Firefox 4 – cliquez pour voir. Avec l'avancement et la vulgarisation du HTML5, de nombreux effets qui ne pouvaient être obtenus qu'avec l'aide de Flash dans le passé peuvent désormais être facilement réalisés sur les pages Web. Par exemple, la lecture de fichiers audio. Cet article n'est qu'une petite astuce pour obtenir facilement l'effet de lecture de sons lorsque des éléments survolent à l'aide de jQuery. Par conséquent, en ce qui concerne cet article et ce plug-in, IE6~8 est simplement. un gâchis.

2. Effets, ressources et utilisation
Tout comme lors d'un rendez-vous à l'aveugle, l'apparence de l'autre personne est très importante, donc si vous voulez avoir un aperçu du vrai visage de Lushan, vous pouvez cliquer ici : Jouez la démo du plug-in Sound jQuery Mini

Vous pouvez voir une navigation verticale similaire à celle suivante dans la démo :

Déplacez rapidement la première vague de navigation avec la souris, et il n'y aura toujours qu'une seule voix jouant, tout comme la mère dans le cœur L'appel de la souris ; tandis que la souris se déplace rapidement, une vague de navigation en dessous, de multiples sons crépitent comme des pétards, tout comme les appels de nombreuses idoles dans le cœur.

Ce plug-in jQuery est très simple et très petit. Il ne coûte qu'environ 30 yuans. Vous ne pouvez pas utiliser de canons anti-aériens pour combattre les moustiques, donc je ne l'emballerai pas. Si le script vous intéresse, vous pouvez "faire un clic droit - [Cible | Lien] Enregistrer sous" en suivant ce lien : jquery-audioPlay.js

Utilisez
pour appeler d'abord la bibliothèque jQuery et ceci fichier de script d'effet, comme indiqué dans le code suivant :
_fcksavedurl=""http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">" _fcksavedurl= ""http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">"

Ensuite, liez simplement les éléments qui nécessitent que la souris joue du son lorsqu'elle passe. Le nom de la méthode est : audioPlay(), par exemple, ce qui suit est utilisé dans la page de démonstration :

Copiez le code

Le code est le suivant :

$("#nav li").audioPlay({
name: "playOnce",
urlMp3: "/study/media/beep. mp3",
urlOgg: " /study/media/beep.ogg"
});

Évidemment, pour jouer du son, il est impossible sans source de fichier audio, donc le L'adresse audio dans le paramètre est indispensable. Les paramètres spécifiques Voir le tableau ci-dessous pour les instructions pertinentes :

参数	默认	释义
name	“audioPlay”	字符串，用来分组的。用在页面上同时有多组播放元素时。
urlMp3	“”	字符串，此参数必须。指mp3格式的音频文件地址。
urlOgg	“”	字符串，此参数必须。指ogg格式的音频文件地址。
clone	false	布尔型。同一组元素是否播放同一个声源。

Remarque : Les navigateurs Firefox et Opera prennent en charge l'audio au format OGG, tandis que les navigateurs principaux du kit Web et IE prennent en charge l'audio au format MP3.

Les effets sonores des groupes de navigation supérieur et inférieur sur la page de démonstration appliquent tous les paramètres ci-dessus, et leur utilisation complète est la suivante :

Copier code

Le code est le suivant :

$(function() {
$("#nav li").audioPlay({
name : "playOnce",
urlMp3 : "/study/media/beep.mp3",
urlOgg : "/study/media/beep.ogg"
}
$("#nav2); li").audioPlay({
urlMp3 : "/study/media/beep.mp3",
urlOgg : "/study/media/beep.ogg",
clone : ​​vrai
});
});

3. Quelques ennuis à la fin
Les navigateurs qui prennent actuellement en charge l'élément audio HTML5 sont les suivants : Firefox 3.5, Chrome 3, Opera 10.5, Safari 4, IE 9 et dans notre pays magique Sur Internet, IE6 ~ 8 représente encore la majeure partie du pays. Vous pensez peut-être que les éléments de cet article ont encore peu de valeur à l'heure actuelle.

Cependant, sur la base du principe d'amélioration progressive et de pondération de l'utilité et de l'utilisation des ressources, ce n'est pas une mauvaise idée d'appliquer cette petite chose de cet article dans des projets réels. De plus, avec l'augmentation substantielle de la capacité installée de Windows 7, l'ère d'IE6 pourrait prendre fin brutalement par inadvertance, d'ici là, il n'est peut-être pas trop tard pour vous rattraper. Cette émotion vient de ma logeuse actuelle, qui a 60 ou 70 ans. Même si elle ne connaît rien en informatique (elle ne l'utilise que pour lire les actions), son ordinateur est un magnifique Windows 7, et il semble qu'elle puisse utiliser Windows. 7 assez bien.

Avant l'arrivée de la grande vague de technologie frontale, vous devez travailler dur pour mettre en pratique les compétences de base, sinon, lorsque la grande vague arrivera, vous serez facilement englouti par la nouvelle technologie imminente. Personnellement, j'ai l'impression que c'est comme au Japon juste après le tremblement de terre, un énorme tsunami arrive...
Téléchargement du package de code de test