طيب شوفي هذه الخطوات وطبقيها:
1- راح تنزلي الصوت على مجلد المشروع وبعدين بداخل ملف الـ html راح تقومي بإضافة الصوت للصفحة بالشكل التالي:
(حطي الكود في اي مكان قبل وسم header او اي مكان مش فارقة معانا)
(لاحظي اني نزلت ملف الصوت وقمت بتسميته audio.mp3 وحطيت مكان الملف في الـ src)
<audio id="audio">
<source src="audio.mp3" type="audio/mpeg">
</audio>
2- راح تعملي زر botton علشان راح نقوم بالضغط علية بالجافاسكربت لما بدنا الصوت يشتغل، لهذا في اكواد الـ html ضيفي الزر في اي مكان في الكود مش فارقة كذلك لاننا راح نخفية بالـ CSS
<button id="playBtn" type="button"></button>
هذه كل الأكواد الي راح تحتاجي تضيفيها لملف الـ HTML
3- علشان نخفي الزر من الصفحة راح تضيفي كود الـ CSS
#playBtn{
display: none;
}
الان اصبح معنا الصوت جاهز في الصفحة ومعنا الزر المخفي الي كلما توصل البوصلة لدرجة معينه راح نضغط علية بإستخدام الجافاسكربت ونشغل الصوت من خلالة.
ليش احتجنا لزر ما نعمل تشغيل بدون زر؟
هذا علشان سياسة التشغيل التلقائي بتفرض على المتصفح انه ما يسمح للموقع يشغل صوت بدون تفاعل من المستخدم او طلب منه، لهذا لمابنعمل زر بنعمل محاكاة لتفاعل مستخدم وطلب بتشغيل الصوت.
الان راح تروحي على ملف الـ Js ونشتغل على عملية تشغيل الصوت
4- راح نمسك الصوت والزر بالجافاسكربت
(حطي هذا الكود في بدأيات ملف الجافاسكربت بجوار المتغيرات الأخرى)
var audio = document.getElementById("audio");
var playBtn = document.getElementById("playBtn");
5- الان خلينا نعمل دالة هذه الدالة راح تنتظر عملية ضغط على الزر وفي حال حصلت عملية الضغط على الزر، راح تشغل الصوت الي عرفناه في الكود السابق audio وتعمل له play
(راح تحطي الدالة في اي مكان، في نهاية الاكواد او تحت الكود السابق)
playBtn.addEventListener("click", function(){
audio.play();
})
الأن كل شئ جاهز فقط تبقى نستمع لحركة الموبايل ونشغل الصوت حسب الدرجة المطلوبة، في الزاوية 0 و 360 راح نشغل الصوت لمدة ثلاث ثواني بشكل متكرر مثلاً وفي بقية الزوايا راح نشغله مرة واحدة.
(راح تكتبي هذا الكود بداخل الدالة onHeadingChange )
if(event.alpha == 0 || event.alpha == 360){
audio.loop = true;
playBtn.click();
setTimeout( function () {
audio.loop = false;
}, 2000);
}else{
playBtn.click();
}
وبهذا تكوني نفذتي المطلوب، وجبت لك الكود كما طلبتي بس اتمنى تفهمية وتحاولي تطبقية بنفسك، ولا تخافي تبوظي الكود اعملي منه نسخة وحاولي واذا في اي مشكلة اطرحيها
