Annonce ■ ♪♬ Lecteurs Audio

Pour remplacer le lecteur audio proposé par EB  (technologie "Flash") qui ne semble  plus adapté aux exigences du moment.

Beaucoup de navigateurs pas trop anciens ont une capacité le lire des fichiers audio avec la balise html <audio>.
On pourrait donc sur nos blogs utiliser la balise html <audio> , mais celle-ci est refusée par l’Éditeur sur Eklablog.

Contourner cette difficulté est possible en utilisant un code Javascript qui l'introduira dans le HTML, au moment voulu, par un clic du visiteur.

>>>>>

Exemple d'un codage pour  2 lecteurs audio (pour 1 seul il suffira de ne pas mettre les lignes  musique2 ; pour plus de lecteurs il faudra rajouter des lignes similaires.
(à placer dans la zone source < > d'un article ou d'une page simple )

<!-- code javascript adapté à la plateforme Eklablog -->
<script type="text/javascript">// <![CDATA[
function lect1() {$("musique1").innerHTML="<audio src='adresse du titre1' controls>■■</audio>";};
function lect2() {$("musique2").innerHTML="<audio src='adresse du titre2' controls>■■</audio>";};
// ]]></script>

<!-- code HTML -->
<p>Cliquer sur un titre pour faire apparaitre le lecteur correspondant</p>

<p><a onclick="lect1()">TITRE N°1</a></p>
<div id="musique1"> </div>

<p><a onclick="lect2()">TITRE N°2</a></p>
<div id="musique2"> </div>

Principe du code : Le clic sur un lien "TITRE" active une fonction "lect", laquelle insère un code <audio>...</audio> dans l'élément identifié "musique" (ici une balise <div></div>, mais ce pourrait être un <p></p>).

>>>>>

IMPORTANT:
- L'autorisation d'ajouter du code javascript doit être activée sur le compte
- Dans le code, les adresses (URL) doivent être placées entre des apostrophes ' (et pas entre des guillemets ")
- La balise <audio> ne fonctionnera pas avec des navigateurs trop anciens
- Le signe ■■ que j'ai mis dans le code, signale l'emplacement où il est possible de placer un texte, qui sera affiché si le navigateur n'est pas compatible avec la balise <audio>.
Par exemple ce texte : Votre navigateur ne prend pas en charge l'audio HTML
- L'aspect visuel du lecteur est fonction du navigateur utilisé

 - Fonctionne en principe pour les fichiers   mp3    wav    ogg
  Je n'ai testé que mp3 et sur PC  
 

 https://textup.fr/426650GB (Annexe pour des compléments éventuels)

Bonjour, si j'ai bien compris, ce code fonctionne pour mettre un audio trouvé sur une page internet. Mais comment faire pour importer un audio depuis mon ordinateur (les élèves se sont enregistré en lisant leurs textes).

Merci beaucoup,

Alice

Bonsoir Alice.B,

L'adresse à indiquer est celle où le navigateur peut trouver sur internet le fichier audio.

Une page web "habite" sur internet à une adresse, et si cette page comporte une musique, le fichier musical est stocké (hébergé) à une autre adresse ; idem pour chaque image.

Si le fichier audio est actuellement sur un ordinateur, il suffit de le télécharger sur la plateforme via la médiathèque du blog (Barre d'administration > Contenu > Gérer les fichiers).
En cliquant sur la vignette du fichier téléchargé, celle-ci apparaitra à droite de la fenêtre, avec son adresse internet en dessous. ( http://ekladata.com/xxxxxxxxxxx)
C'est cette adresse qui sera à utiliser.

Edit: je viens d'ajouter dans l'annexe, pour exemple, un code audio complet (fonctionnel) https://textup.fr/426650GB

Grand merci Stormalo pour ce "truc" permettant de se passer de Flash qui ne sera bientôt plus supporté (fin 2020)

Bonjour Stormalo, y a-t-il une possibilité de changer la couleur de fond du lecteur ou la taille par exemple en le rajoutant à tes lignes css, s'il te plait ? (j'ai réussi a changer la taille via la page source, mais pas le reste) ?  Mes lecteurs sont sur le coté et j'aimerai pouvoir les intégrer un minimum au "décor" . Je sais que Eklablog a beaucoup de retard mais peut-être s'aurais-tu s'il compte faire des mise à jour sur le script et l'audio ? (je vais souvent sur le site codepen et on y trouve 1001 lecteur... mais eklablog les refuse tous !) Merci par avance pour tes réponses.

bonsoir Sil Dia

L'éditeur utilisé par Eklabog est un peu ancien et il a été paramétré pour ne pas tout accepter, probablement pour sécuriser son usage par tous ; de plus, à l'époque de sa mise en place les balises audio et vidéo n'existaient pas.

Le lecteur html qui existe aujourd'hui a une présentation qui n'est pas la même sur tous les navigateurs.
Celui de Firefox,  est à mon goût moins agréable que celui de Edge par exemple. Et  comme tout le monde n'utilise pas les mêmes navigateurs, difficile de maitriser cet aspect.

Peut être  que EB en proposera un avec un style spécifique. Si déjà l'éditeur autorisait la balise <audio> ce serait bien ; il n'y aurait plus besoin du codage que j'ai présenté dans ce sujet

Oh oui, rien que la balise <audio> ouvrirai tant de possibilité... quelle dommage ! Personnellement, j'utilise Opéra et c'est le même visuel que edge. je ne peux donc pas changer la couleur (j'ai fait des essais et cela change le fond du bloc, donc, on ne voit le changement que sur les coins... double dommage ! ^^

En tout cas, merci pour ta réponse.

merci oui mais je voudrais savoir ou faut t'il mettre le titre ou la chanson dans le lien

<!-- code HTML -->
<p>Cliquer sur un titre pour faire apparaitre le lecteur correspondant</p>

<p><a onclick="lect1()">TITRE N°1</a></p>
<div id="musique1"> </div>

<p><a onclick="lect2()">TITRE N°2</a></p>
<div id="musique2"> </div>

Dans la sujet c'est là ou j'ai indiqué en rouge "adresse du titre" tu écris l'adresse du lien

Voir la page : 

https://textup.fr/426650GB (Annexe pour des compléments éventuels)

Il y a un exemple complet. Tu le copies-colles dans un brouillon ou dans le blog de démo

le titre de la musique en exemple est:
Amazing grace

Attention :
Dans ce genre de code <script> , il y a des caractères   "   et des caractères   ' 
Il faut bien distinguer et respecter les apostrophes et les guillemets

Vous trouverez deux autres exemples de lecteurs avec playlist en suivant ces 2 liens:

http://le-blog-facile.ek.la/ajouter-un-lecteur-audio-p2911392

http://le-blog-facile.ek.la/un-autre-lecteur-audio-p2990579