Intégrer un lecteur HTML5 pour fichier MP3

J’espérais simplement coller ce qui suit dans un sujet Discourse pour obtenir un lecteur mp3 HTML5. (Cette source intégrée provient d’un plugin de mon site WordPress.)

Des pistes, des idées, … ??

<blockquote class="wp-embedded-content"><a href="https://moversmindset.com/083-cara-michele-nether-aikido-wellness-and-honesty/">083. Cara-Michele Nether : Aïkido, bien-être et honnêteté</a></blockquote>
<script type='text/javascript'>
<!--//--><![CDATA[//><!--
		/*! This file is auto-generated */
		!function(d,l){"use strict";var e=!1,o=!1;if(l.querySelector)if(d.addEventListener)e=!0;if(d.wp=d.wp||{},!d.wp.receiveEmbedMessage)if(d.wp.receiveEmbedMessage=function(e){var t=e.data;if(t)if(t.secret||t.message||t.value)if(!/[^a-zA-Z0-9]/.test(t.secret)){var r,a,i,s,n,o=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),c=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]');for(r=0;r<c.length;r++)c[r].style.display="none";for(r=0;r<o.length;r++)if(a=o[r],e.source===a.contentWindow){if(a.removeAttribute("style"),"height"===t.message){if(1e3<(i=parseInt(t.value,10)))i=1e3;else if(~~i<200)i=200;a.height=i}if("link"===t.message)if(s=l.createElement("a"),n=l.createElement("a"),s.href=a.getAttribute("src"),n.href=t.value,n.host===s.host)if(l.activeElement===a)d.top.location.href=t.value}}},e)d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",t,!1),d.addEventListener("load",t,!1);function t(){if(!o){o=!0;var e,t,r,a,i=-1!==navigator.appVersion.indexOf("MSIE 10"),s=!!navigator.userAgent.match(/Trident.*rv:11\./),n=l.querySelectorAll("iframe.wp-embedded-content");for(t=0;t<n.length;t++){if(!(r=n[t]).getAttribute("data-secret"))a=Math.random().toString(36).substr(2,10),r.src+="#?secret="+a,r.setAttribute("data-secret",a);if(i||s)(e=r.cloneNode(!0)).removeAttribute("security"),r.parentNode.replaceChild(e,r)}}}}(window,document);
//--><!]]>
</script><iframe sandbox="allow-scripts allow-same-origin" security="restricted" src="https://moversmindset.com/083-cara-michele-nether-aikido-wellness-and-honesty/embed/" width="500" height="350" title="&#8220;083. Cara-Michele Nether : Aïkido, bien-être et honnêteté&#8221; &#8212; movers mindset" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe>
1 « J'aime »

Peut-être CSP ?

Est-ce que vous le collez dans un message ou… ?

1 « J'aime »

Ooooooooooh, ça ressemble exactement au problème… Je vais bidouiller l’extension du CSP pour autoriser le site WP…

1 « J'aime »

Vérifiez le journal des erreurs de la console du navigateur..

1 « J'aime »

Les publications dans Discourse n’autoriseront jamais l’exécution de code JS collé aléatoirement pour des raisons de sécurité.

Si tout ce dont vous avez besoin est fourni par l’iframe, vous pouvez autoriser ce domaine spécifique dans les paramètres du site et le coller dans un sujet.

2 « J'aime »

J’ai désactivé complètement la CSP dans l’admin (juste pour voir si c’est ce qui empêche mon iframe de fonctionner correctement) notez que tout ce que je colle se trouve dans le bloc de code de mon message initial.

Ça ne fonctionne toujours pas… curieusement, je n’obtiens que trois erreurs dans la console, toutes provenant du CDN de Discourse . . . le code est inséré juste avant “en savoir plus”

1 « J'aime »

:confused: … oh, ça a du sens maintenant que vous le dites.

J’espérais simplement copier-coller un tas de code d’intégration depuis le plugin WordPress que j’utilise ; je voulais intégrer un lecteur HTML5 pour des fichiers audio mp3. Donc, ça ne va pas fonctionner. Dommage.

1 « J'aime »

Nous avons un soutien étendu pour les lecteurs intégrés et non intégrés, prêt à l’emploi.

YouTube

Vimeo

SoundCloud

https://soundcloud.com/silkmusic/silkm265-1?in=silkmusic/sets/silkm265

Vous pouvez même télécharger directement des fichiers MP3 et MP4, et ils deviendront un lecteur.

3 « J'aime »

…oui, mais tout cela ne repose-t-il pas sur le fait que le serveur distant envoie correctement les balises Open Graph ? (J’ai déjà vu/utilisé ces intégrations SoundCloud — elles sont géniales.)

Mon site WordPress envoie bien les balises Open Graph, mais pas de manière suffisamment intelligente…

https://moversmindset.com/083-cara-michele-nether-aikido-wellness-and-honesty/ est une page contenant un lecteur HTML5… celle-ci s’intègre parfaitement (onebox) exactement comme je l’espérais…

https://moversmindset.com/083-cara-michele-nether-aikido-wellness-and-honesty/083-cara-michele-nether-aikido-wellness-and-honesty/ est l’URL WordPress de l’élément multimédia… mais encore une fois, WordPress n’est pas assez intelligent pour envoyer suffisamment d’informations Open Graph afin de permettre une intégration vraiment astucieuse…

…Je vais essayer de télécharger directement le fichier MP3… je ne suis pas sûr de pouvoir déposer un fichier MP3 de ~40 Mo (et ce, pour plus de 80 épisodes) sur mon Discourse hébergé…

1 « J'aime »

Ajouter un lien vers un fichier mp3 en une seule ligne comme suit :

https://moversmindset.com/podcast-player/7711/083-cara-michele-nether-aikido-wellness-and-honesty.mp3

devient

2 « J'aime »

J’ai autorisé l’extension mp3 pour les téléchargements, mais je viens de rencontrer une limite de taille.

…ce qui est logique.

Je les ai déjà hébergés sur un service de partage de fichiers (notre propre site web)… mais lorsque je colle l’URL brute d’un fichier mp3, j’obtiens un lecteur minimaliste basé sur le navigateur [du moins, c’est ce que je pense que signifie la ligne suivante].

1 « J'aime »

C’est une bonne première étape.

À partir d’ici, vous pouvez commencer à comparer les options suivantes :

  • Une meilleure plateforme d’intégration de podcast compatible à la fois avec WordPress et Discourse, en utilisant des iframes.

  • Le transfert de votre lecteur actuel de WordPress vers Discourse.

2 « J'aime »

…ouais, c’est bien le rocher sur lequel je craignais de faire naufrage. Je devrais refaire toute notre solution d’hébergement de podcasts. (Pas impossible, mais loin d’être trivial.)

…peut-être que je pourrais soumettre une demande de fonctionnalité à Castos (qui développe le plugin Seriously Simple Podcasting pour WordPress que nous utilisons) en expliquant exactement quelles informations OG sont nécessaires pour créer un lecteur onebox magnifique, dans le style de SoundCloud.

:man_shrugging:

1 « J'aime »

Il semble que certains services proposent des lecteurs intégrables dans leur offre, comme mon premier résultat Google :

3 « J'aime »

Oui. Mon rêve est de trouver un lecteur qui comprenne et prenne en charge les marqueurs de chapitres dans les fichiers MP3, désormais courants dans les podcasts, et qui permette de sauter directement à des codes temporels spécifiques. J’essayais de créer un sujet complexe pour un épisode, incluant des notes de l’émission qui redirigent le lecteur vers le bon moment de l’audio, ainsi que la possibilité de naviguer entre les chapitres. (Mais, je m’égare. Cela n’a rien à voir avec Discourse lui-même. :slight_smile:

2 « J'aime »

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.