تضمين مشغل HTML5 لملف MP3

كنت أتمنى فقط لصق ما يلي في موضوع على Discourse والحصول على مشغل MP3 لـ HTML5. (هذا المصدر المدمج يأتي من إضافة على موقعي على WordPress.)

نقاط توجيه، أفكار، … ؟؟

<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. كارا-ميشيل نيذر: أيكيدو، الرفاهية، والصدق&#8221; &#8212; movers mindset" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe>```

ربما CSP؟

هل تقوم بلصقها في المنشور أم…؟

أوه أوه أوه، يبدو هذا تمامًا مثل المشكلة… سأقوم بتجربة توسيع سياسة محتوى الأمان (CSP) للسماح لموقع ووردبريس…

تحقق من سجل أخطاء وحدة تحكم المتصفح ..

نشر في ديسكورت لن يسمح أبدًا بتشغيل كود JavaScript عشوائي منسوخ لأسباب أمنية.

إذا كان كل ما تحتاجه متوفرًا داخل إطار الويب (iframe)، فيمكنك السماح بهذا النطاق المحدد في إعدادات الموقع ولصقه في موضوع.

لقد قمت بإيقاف CSP بالكامل في لوحة الإدارة (فقط لمعرفة ما إذا كان هذا هو ما يمنع إطار العمل الخاص بي من العمل بشكل صحيح) ملاحظة: النص الكامل الذي ألصقه موجود في كتلة الكود في منشوري الأصلي.

لا يزال لا يعمل… من الغريب أنني أحصل فقط على ثلاثة أخطاء في وحدة التحكم، وجميعها من CDN الخاص بـ Discourse… الكود مُدرج مباشرة قبل عبارة “اعرف المزيد”.

:confused: …أوه، هذا منطقي الآن بعد أن ذكرته.

كنت آمل فقط في نسخ ولصق مجموعة من أكواد التضمين من إضافة ووردبريس التي أستخدمها؛ كنت أرغب في تضمين مشغل HTML5 لملفات الصوت بصيغة mp3. إذن، هذا لن يعمل. للأسف.

لدينا دعم واسع للمشغلات المضمنة وغير المضمنة، جاهز للاستخدام مباشرة.

يوتيوب

فيميو

ساوند كلاود

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

يمكنك حتى رفع ملفات MP3 وMP4 مباشرة، وستتحول تلقائيًا إلى مشغل.

نعم، لكن ألا يعتمد كل ذلك على إرسال Open Graph بشكل صحيح من الخادم الآخر؟ (لقد رأيت واستخدمت تضمينات SoundCloud من قبل وهي رائعة.)

موقعي على ووردبريس يرسل Open Graph، لكنه لا يرسل معلومات OG ذكية بما يكفي…

https://moversmindset.com/083-cara-michele-nether-aikido-wellness-and-honesty/ هي صفحة تحتوي على مشغل HTML5… وهذا يعرض كـ onebox تمامًا كما أتوقع/آمل…

https://moversmindset.com/083-cara-michele-nether-aikido-wellness-and-honesty/083-cara-michele-nether-aikido-wellness-and-honesty/ هو رابط ووردبريس لعنصر الوسائط… لكن مرة أخرى، ووردبريس ليس ذكيًا بما يكفي لإرسال معلومات OG كافية لعرض onebox ذكي حقًا…

…سأحاول رفع ملف MP3 مباشرة… لست متأكدًا مما إذا كان بإمكاني تحميل ملف MP3 بحجم حوالي 40 ميجابايت (مضروبًا في أكثر من 80 حلقة) إلى Discourse المستضاف لدي…

إضافة رابط إلى ملف mp3 في سطر واحد مثل:

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

تتحول إلى

سمحت بامتداد mp3 للرفع، لكنني صادفت حدًا للحجم

…وهو أمر منطقي.

في الواقع، الملفات موجودة بالفعل على خدمة مشاركة ملفات (موقعنا الإلكتروني)… لكن عند وضع رابط مباشر لملف mp3، أحصل فقط على مشغل بسيط يعتمد على المتصفح [على الأقل، هذا ما أعتقد أن السطر التالي يشير إليه]

هذه خطوة أولى جيدة.

من هنا، يمكنك البدء في البحث عن أحد الخيارين التاليين:

  • منصة تضمين بودكاست أفضل يمكنك استخدامها في كل من ووردبريس وديسكورش من خلال استخدام إطارات مضمنة (iframes).

  • نقل مشغلك الحالي من ووردبريس إلى ديسكورش.

…نعم، هذا هو الصخر الذي كنت أخشى أن أتحطم عليه. سأضطر إلى إعادة هيكلة استضافة البودكاست وحلنا بالكامل. (ليس مستحيلاً، لكنه أيضًا ليس أمرًا بسيطًا.)

…ربما يمكنني تقديم طلب ميزة إلى Castos (التي تصنع إضافة Seriously Simple Podcasting لـ WordPress التي نستخدمها) توضح بالضبط معلومات OG المطلوبة لإنشاء مشغل من نوع onebox جميل يشبه SoundCloud.

:man_shrugging:

يبدو أن بعض الخدمات تتضمن مشغلات قابلة للتضمين في عروضها، مثل أول نتيجة لي في جوجل:

نعم. حلمي هو العثور على مشغل يفهم ويدعم علامات الفصول في ملفات MP3، وهي ميزة أصبحت شائعة في البودكاست، وتدعم أيضًا خاصية “القفز إلى” أوقات محددة. كنت أحاول إنشاء منشور لموضوع معقد يتعلق بحلقة تتضمن ملاحظات من العرض توجه المشغل إلى النقطة الصحيحة في الصوت، مع إمكانية التنقل بين الفصول. (لكنني أشتت الانتباه. هذا لا علاقة له بـ Discourse نفسه. :slight_smile: