• Annonce ■ ♪♬ Lecteur Audio


    Dimanche 12 Avril à 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 à 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 à 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 en annexe, pour exemple, un code audio complet (fonctionnel) https://textup.fr/426650GB




    Vous devez être membre pour poster un message.