• Annonce ■ ♪♬ Lecteurs Audio


    Dimanche 12 Avril 2020 à 09:01
    stormalo

    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)

    Mercredi 29 Avril 2020 à 19:52
    Alice.B

    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

    Mercredi 29 Avril 2020 à 21:35
    stormalo

    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

    Dimanche 13 Décembre 2020 à 12:41
    big-bear-photos

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

    Mardi 12 Janvier 2021 à 19:15
    Sil Dia

    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.

    Mardi 12 Janvier 2021 à 20:23
    stormalo

    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

    Mercredi 13 Janvier 2021 à 16:02
    Sil Dia

    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.

    Vendredi 29 Janvier 2021 à 16:40
    jean marie14

    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>

    Vendredi 29 Janvier 2021 à 17:09
    stormalo

    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

    Mercredi 9 Novembre 2022 à 08:35
    Papasti

    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

     




    Vous devez être membre pour poster un message.