• Annonce ■ ♪♬ Lecteur 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

    Lundi 29 Juin 2020 à 21:29
    Marisarah

    Bonjour, cela fait deux jours impossible d'insérer. autoplay=1&amp; dans le code source d'un article, merci de me renseigner, voire m'aider.

    Cordialement

    Mardi 30 Juin 2020 à 21:16
    stormalo

    Bonjour,

    Désolé, cette demande n'a aucun rapport avec le présent sujet. (D'ailleurs mon codage ne propose pas "autoplay", car permettant de mettre plusieurs morceaux de musique sur une même page ça ferait une belle cacophonie) 

    Il faut poser cette question dans "Besoin d'aide"

    Note: 
    La lecture automatique de musique peut être une nuisance pour les utilisateurs.   

    Mardi 30 Juin 2020 à 21:22
    Marisarah

    Merci, j'ai réussi, bonne soirée.

    Vendredi 30 Octobre 2020 à 11:56
    bakuba

    bonjour marisarah

    puisque tu as réussi à faire démarrer ta musique automatiquement peux tu m'indiquer le code à mettre et ou le placer(même si le démarrage auto est déconseillé par certains...lol)

    merci.bonne journée

    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 à 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 à 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




    Vous devez être membre pour poster un message.