اذهب إلى المحتوى

السؤال

Recommended Posts

  • 1
نشر

يمكنك فعل ذلك باستخدام جافاسكربت, لنشرح ذلك باستخدام الكود
لاحظ كود html

    <img src="test.png" alt="">
    <audio id="myAudio" src="closer.mp3"></audio>

يمكننا اعطاء الصورة خاصية onclick أي عند الضغط على عليها نقوم بتشغيل الصوت, يمكننا فعل ذلك كالتالي

    <img src="test.png" alt="" onclick="document.getElementById('audio').play();">
    <audio id="audio" src="closer.mp3"></audio>

 

  • 1
نشر

باستخدام javascript فقط يمكنك 

<body>  


<audio id="audio" src="Music/song.wav"></audio>
<img id="img" src="assets/a.png" >

<script>
document.getElementById("img").addEventListener("click", function(){
    document.getElementById("audio").play();
});
<script>
  
</body>

يمكنك أيضا عمل pause للصوت فرضا اذا كان مقطع طويل كأغنية مثلا


<body>


<audio id="audio" src="Music/song.wav"></audio>
<img id="img" src="assets/a.png" >

<script>
document.getElementById("img").addEventListener("click", function(){
    const audio = document.getElementById("audio")

    if (audio.duration > 0 && !audio.paused) {//يمكن التحقق ما ان كان المقطع يشتغل 
      audio.pause()// اذا كان يستغل فعند الضغط على الصورة المقطع يتوقف
    }else{
    
      audio.play() // اذا لم يكن يشتغل فعند الضغط على الصورة سيعمل
    }
});
<script>

</body>

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...