Mam obraz, który po najechaniu myszą użytkownika na obraz zmienia się na nowy. Po kliknięciu nowego obrazu odtwarzany jest plik audio. Gdy mysz użytkownika znajdzie się poza obrazem, obraz powraca do domyślnego. Problem polega na tym, że dźwięk nadal jest odtwarzany. Nie jestem taki dobry z js, jak mam zrobić pauzę dźwięku, gdy mysz użytkownika jest również wyłączona? Każda pomocna opinia jest bardzo mile widziana. Poniżej znajduje się kod.

<script type="text/javascript">
    function setNewImg() {
        document.getElementById("about-me-img").src = "https://storage.googleapis.com/gd-wagtail-prod-assets/images/evolving_google_identity_2x.max-4000x2000.jpegquality-90.jpg";
    }
    function setOldImg() {
        document.getElementById("about-me-img").src = "imgs/about-me.png";

    }
    function pauseAudio() {
        document.getElementById("about-me-img").pause();
    }
</script>

<audio id="audio-play">
    <source src="audio.mp3" type="audio/mpeg" />
    </audio>

    <img id="about-me-img" onmouseover="setNewImg()" onmouseout="setOldImg()" onclick="document.getElementById('audio-play').play(); return false;" class="about-me-image about-me-img" src="imgs/about-me.png" alt="" width="200px;">
1
Jay 1 kwiecień 2020, 20:11

3 odpowiedzi

Najlepsza odpowiedź

Zadzwoń pod numer pauseAudio za setOldImg i zmień document.getElementById("about-me-img").pause(); na document.getElementById("audio-play").pause();

function setOldImg() {
    document.getElementById("about-me-img").src = "imgs/about-me.png";
    pauseAudio();

}
function pauseAudio() {
    document.getElementById("audio-play").pause();
}
2
Anurag Srivastava 1 kwiecień 2020, 17:37

Aby to naprawić, wystarczy wywołać pause() w elemencie audio, gdy mouseout nastąpi w elemencie img.

Należy jednak pamiętać, że atrybuty zdarzenia onX są teraz bardzo nieaktualne i nie stanowią już dobrej praktyki. Zamiast tego powinieneś dyskretnie dołączać swoje wydarzenia. W związku z tym spróbuj tego:

document.addEventListener('DOMContentLoaded', () => {
  let audio = document.querySelector('#audio-play');
  let img = document.querySelector('#about-me-img');

  audio.volume = 0.1; // just for testing, so it doesn't deafen you

  img.addEventListener('mouseover', () => img.src = 'https://storage.googleapis.com/gd-wagtail-prod-assets/images/evolving_google_identity_2x.max-4000x2000.jpegquality-90.jpg');
  img.addEventListener('mouseout', () => {
    img.src = 'imgs/about-me.png';
    audio.pause();
  });
  img.addEventListener('click', () => audio.play());
});
img {
  display: block;
  width: 200px;
  height: 200px;
  background-color: #C00;
}
<audio id="audio-play" controls>
  <source src="http://www.sousound.com/music/healing/healing_01.mp3" type="audio/mpeg" />
</audio>

<img id="about-me-img" class="about-me-image about-me-img" src="imgs/about-me.png" alt="" />
1
Rory McCrossan 1 kwiecień 2020, 17:25

Spróbuj zmienić „about-me-img” w funkcji paiseAudio () na „audio-play”.

2
Victor Sanborn 1 kwiecień 2020, 17:16