Introduction
Aujourd’hui, j’aimerais vous présenter un système assez sympathique, c’est une navigation en Ajax, ce dernier permet de charger des données dynamiquement sans avoir à recharger la page de l’utilisateur. Ça permet par exemple pour des sites d’e-commerce d’ajouter un élément au panier sans gêner la navigation de l’utilisateur. Vous allez-me dire du coup quel est l’intérêt par exemple pour une navigation et bien tout simplement on va pouvoir recharger seulement une partie de la page et donc ne pas recharger les autres parties comme un lecteur audio !
Voici, en screenshot, l’exemple d’un tel système :
Et vous pouvez trouver une démonstration ici.
La balise audio : HTML5
Depuis l’introduction de l’HTML5, de nouveaux éléments comme les balises audio et vidéo sont apparus. Ici, comme on va construire un exemple avec la balise audio, on va la détailler un peu. Bon comme son nom l’indique, la balise audio permet de jouer des musiques (dingue non ?), voyons quelques attributs que cette dernière possède :
- autoplay: permet de lancer le player à la fin du chargement de la page
- preload: permet de charger la musique en même temps que la page, afin de pouvoir être jouer une fois que celle-ci a chargé
- controls: permet d’afficher les boutons de contrôle comme la mise en pause ou la lecture
- muted: un boolean permettant d’activer ou désactiver le son en jouant avec du javascript par exemple
- loop: spécifie que la musique doit se jouer en boucle
- src: permet de préciser le chemin vers la musique à jouer
La balise offre un certain nombre de contrôles assez intéressant, si vous voulez voir le détail complet, je vous laisse aller voir la documentation. Il nous reste encore quelque chose à prendre en compte, c’est le support des navigateurs, le support de fichier audio le plus répandu est le mp3, mais certains navigateurs ne le supportent pas (sinon ça serait trop simple :3) du coup il faut offrir une alternative et donc convertir son fichier également pour le format ogg. Pour ce faire vous pouvez utiliser des sites comme zamzar.
Les différents formats audio supportés par les navigateurs
Voici un tableau récapitulatif :
| Chrome | Firefox | IE | Safari | |
|---|---|---|---|---|
| WAV | ||||
| OGG | ||||
| MP3 | ||||
| AAC | ||||
| AIFF | ||||
| AU |
Enfin, un exemple d’utilisation de la balise :
<audio controls>
<source src="data/monFichier.mp3" type='audio/mpeg; codecs="mp3"'>
<source src="data/monFichier.ogg" type='audio/ogg; codecs="vorbis"'>
<p>Votre navigateur ne supporte pas le HTML5.</p>
</audio>
Remarque : le paragraphe ne sera affiché que sur les anciens navigateurs qui ne supporteraient pas la balise audio.
L’exemple au complet
Bon bah c’est parti allons dans le vif du sujet, donc ce qu’on veut obtenir c’est pouvoir changer de page sans couper notre lecteur audio. Comment va-t-on réaliser cela ? Assez facilement à vrai dire, on va donc utiliser de l’ajax, pour les néophytes complets, il est temps de prendre un cours. Grosso modo, on réalise une requête dynamique vers le serveur grâce au javascript. On peut ainsi récupérer des données dynamiquement sans avoir à recharger la page. Ici, on va tout simplement remplacer le contenu d’une div par celui d’une autre page ! Et vous allez voir, c’est plutôt simple 🙂 !
<html>
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="header">
<ul>
<li><a href="accueil.html">Accueil</a></li>
<li><a href="ff7.html">Final Fantasy 7</a></li>
<li><a href="ff10.html">Final Fantasy 10</a></li>
</ul>
</div>
<div id="content">
<div class="article"></div>
<audio controls>
<source src="data/to-zanarkand.mp3" type='audio/mpeg; codecs="mp3"'>
<source src="data/to-zanarkand.ogg" type='audio/ogg; codecs="vorbis"'>
<p>Votre navigateur ne supporte pas le HTML5.</p>
</audio>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
Bon comme d’habitude avec le html pas grand-chose à dire, on propose deux versions différentes de notre musique, on inclut la librairie jquery et notre script.
Un peu de Css pour égayer notre exemple
Je vous donne également une portion de css, elle n’est vraiment pas utile en soi pour l’article, c’est plus pour décorer la page qu’autre chose. Si vous voulez décortiquer le code, je vous laisse entre les mains de google :p !
html, body {
margin: 0;
padding: 0;
}
#header {
background: #141414;
color: white;
padding: 8px 0;
margin-bottom: 15px;
}
#header ul { list-style-type: none; }
#header ul li { display: inline; margin-right: 25px; }
#header ul li a { text-decoration: none; color: white; }
#header ul li a:hover { color: #2D8DBE; }
#content { margin: 1% 2%; }
#content audio {
display: block;
margin: auto;
width: 600px;
}
.article img { display: block; margin-left: auto; margin-right: auto }
.article p {
font-family: 'PT Sans', Georgia, Verdana, sans-serif;
color: #767676;
line-height: 22px;
letter-spacing: 0.5px;
font-size: 18px;
}
Réaliser une navigation en Ajax grâce à JQuery
Enfin regardons le JS :
$(document).ready(function() {
$("li a").click(function(event) {
page = $(this).attr("href");
$.ajax({
method: "POST",
url: "pages/"+page,
data: {}
}).done(function(res) {
afficher(res);
});
return false;
});
function afficher(data) {
$(".article").fadeOut('500', function() {
$(".article").empty();
$(".article").append(data);
$(".article").fadeIn('500');
});
}
$( window ).load(function() {
$.ajax({
method: "POST",
url: "pages/accueil.html",
data: {}
}).done(function(res) {
$(".article").empty();
$(".article").append(res);
});
return false;
});
});
Donc développons le script en 3 points :
- Premièrement, on déclare un événement sur chaque clic sur le lien du menu. On récupère alors l’attribut href du lien, par exemple « ff7.html ». On lance alors une fonction ajax, qui ne fera qu’appeler la page désirée. On utilise alors une fonction afficher.
- Cette fameuse fonction afficher, vide le contenu de notre div article et lui ajoute le contenu récupérer grâce à la fonction ajax. Le tout en réalisant des animations fadeOut() et fadeIn().
- Enfin, au chargement de la page, on affiche le contenu de la page d’accueil, on n’utilise pas la fonction afficher() car on ne veut pas avoir d’effet au chargement de la page.
Remarque : les pages que l’on va appeler se situent dans un dossier nommé « pages », elles ne contiennent que du html classique. Ici les exemples proviennent de wikipédia.
Enfin, pour ceux qui le désirent, je vous propose de télécharger le code de l’exemple.
Bonjour,
Cela fonctionne très bien pour charger une page html mais pour charger une page php cela ne fonctionne pas
Quel genre de modif pour rendre ce script fonctionnel avec php sil vous plait ?
Bonjour,
Cela fonctionne, également avec du php, il suffit de faire pointer l’url de votre lien sur votre script php et ensuite de retourner ce qu’il faut au JS.
A bientôt :).
Bonjour,
Existe il un moyen d’afficher dans l’url le nom de la page au lieu de rester sur le lien principal ?
Sinon super ç’est bien pratique pour avoir son player 🙂
Bonjour,
Pardon, pour le délai de ma réponse, oui, c’est possible, il suffit d’utiliser l’api javascript et la méthode history, voici un très bon tutoriel sur le sujet.
Bonne continuation !
Bonjour,
Si à l’occasion vous avez la possibilité de l’ajouter, j’ai regardé mais c’est un peu compliqué pour moi 🙂
Merci