اخفاء المقطع الصوتي من الصفحة html

إذا أردت ان تجعل المقطع الصوتي غير مرئي يمكنك فعل ذلك من خلال CSS هكذا.

audio{
	display: none;
}

ولكن لجعل المقطع الصوتي يعمل في تلقائياً فلقد قامت جوجل بمنع هذه الخاصية في جميع المتصفحات التي تعمل علي نواة Chromium مثل Microsoft Edge و Google Chrome.

ويمكنك تصفح هذه الصفحة لمعرفة تفاصيل أكثر من هنا.

باستطاعتك استخدام خاصية CSS "display" وتعيينها على "none" لإخفاء العنصر، ويمكن إظهاره مرة أخرى عن طريق تعيين "display" على "block" أو "inline" أو أي قيمة أخرى تناسب حاجتك.

1- ابحث عن العنصر الذي يحتوي على مقطع الصوتي في صفحة HTML، وقم بإضافة معرف فريد لهذا العنصر باستخدام الخاصية "id". على سبيل المثال، يمكنك تعيين معرف "audio-player" لعنصر مشغل الصوتيات.

<audio id="audio-player" src="audio-file.mp3"></audio>

2- ثم، في CSS، يمكنك استخدام الخاصية "display" وتعيينها على "none" لإخفاء العنصر بحيث لا يظهر في الصفحة، ويمكنك استخدام المعرف الذي قمت بتعيينه في الخطوة الأولى.

#audio-player {
  display: none;
}

3- يمكنك أيضًا استخدام JavaScript للتحكم في عرض وإخفاء مقطع الصوتي. يمكن استخدام الدالة getElementById() للحصول على عنصر مقطع الصوتي وتعيين خاصية "display" على "none" لإخفاء العنصر، وتعيينها على "block" لإظهاره مرة أخرى.

const audioPlayer = document.getElementById("audio-player");
audioPlayer.style.display = "none"; // to hide the audio player
audioPlayer.style.display = "block"; // to show the audio player

وبخصوص  تشغيل مقطع الصوتي تلقائيًا عند زيارة الموقع باستخدام خاصية "autoplay" في عنصر الصوت <audio> في HTML، يجب مراعاة أنه في بعض المتصفحات  سيتم حجب التشغيل التلقائي لمقاطع الصوت والفيديوات عند زيارة الصفحة، ويجب على المستخدم النقر على زر تشغيل للبدء في الاستماع.

ولإضافة خاصية "autoplay"، يمكن تعيينها على العنصر <audio> في الصفحة HTML عن طريق إضافة الكلمة المفتاحية "autoplay" بمفردها كما يلي:

<audio id="audio-player" src="audio-file.mp3" autoplay></audio>

والمتصفحات التي تحجب التشغيل التلقائي:

• جوجل كروم (Google Chrome)، ابتداءً من إصدار 66
• متصفح فايرفوكس (Firefox)، ابتداءً من إصدار 66
• متصفح سفاري (Safari)، ابتداءً من إصدار 11
• متصفح إيدج (Microsoft Edge)، ابتداءً من إصدار 17

بجانب ما اقترح الزملاء، يمكنك تصريح الخاصية hidden في وسم audio لعمل ذات الفكرة:

<audio src="audio.mp3" controls hidden></audio>

العنصر <audio> في HTML

شكرا  لكم  ستتام  التجربه