Question 43945 in Html Question posted in
Some basic documentation can be found here.

HTML and JS : image to another image onclick + sound

i’m trying to create a script so that when you click on the picture A, the picture B appears instead and when you click again the image A appears, etc.
It works just fine but i’d like to add to it a music when you click on the picture A so that it plays when the picture B is displayed.

function changeImage() {
  if (document.getElementById("imgClickAndChange").src == "https://www.shutterstock.com/image-photo/surreal-image-african-elephant-wearing-260nw-1365289022.jpg") {
    document.getElementById("imgClickAndChange").src = "https://thumbs.dreamstime.com/b/belle-for%C3%AAt-tropicale-%C3%A0-l-itin%C3%A9raire-am%C3%A9nag%C3%A9-pour-amateurs-de-la-nature-de-ka-d-ang-36703721.jpg";
  } else {
    document.getElementById("imgClickAndChange").src = "https://www.shutterstock.com/image-photo/surreal-image-african-elephant-wearing-260nw-1365289022.jpg";
  }
}
<p>
  <img alt="" src="https://www.shutterstock.com/image-photo/surreal-image-african-elephant-wearing-260nw-1365289022.jpg" style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()" />
</p>
Tags:

3

Answers


  1. 0

    Keep in mind that audio and video must be muted as per browser permission rules since 2018.

    In other words you can’t play sounds unless the user clicks the player.

    https://developer.chrome.com/blog/autoplay/#web-audio

    But you probably don’t want to have a visible audio player and to just play the music as you please, but you can’t unless its visible and muted…

    <audio controls muted></audio>
    Login or Signup to reply.
  2. 0

    Is this what you want:

    Here I updated your code, I used the HTML5 audio element and on the changeImage function I play the sound file on every image change.

    function changeImage() {
    var imgElement = document.getElementById("imgClickAndChange");
    var musicElement = document.getElementById("music");
    if (imgElement.src == "https://www.shutterstock.com/image-photo/surreal-image-african-elephant-wearing-260nw-1365289022.jpg") {
      imgElement.src = "https://thumbs.dreamstime.com/b/belle-for%C3%AAt-tropicale-%C3%A0-l-itin%C3%A9raire-am%C3%A9nag%C3%A9-pour-amateurs-de-la-nature-de-ka-d-ang-36703721.jpg";
    } else {
      imgElement.src = "https://www.shutterstock.com/image-photo/surreal-image-african-elephant-wearing-260nw-1365289022.jpg";
    }
    musicElement.currentTime = 0;
    musicElement.play();
  }
    <audio id="music" src="http://commondatastorage.googleapis.com/codeskulptor-assets/Collision8-Bit.ogg"></audio>
<p>
  <img alt="" src="https://www.shutterstock.com/image-photo/surreal-image-african-elephant-wearing-260nw-1365289022.jpg" style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()" />
</p>
    Login or Signup to reply.
  3. 0

    Thanks for asking this. I hope my answer will help you to reach your desired output.

    Kindly check my code on codepen.

    var img1Url =
"https://www.shutterstock.com/image-photo/surreal-image-african-elephant-wearing-260nw-1365289022.jpg";

var img2Url =
"https://thumbs.dreamstime.com/b/belle-for%C3%AAt-tropicale-%C3%A0-l-itin%C3%A9raire-am%C3%A9nag%C3%A9-pour-amateurs-de-la-nature-de-ka-d-ang-36703721.jpg";

var audio1 = "https://samplelib.com/lib/preview/mp3/sample-15s.mp3";

var audio2 = "https://samplelib.com/lib/preview/mp3/sample-3s.mp3";

var imgElement = document.getElementById("my-image");

var avEl = document.createElement("audio");

function changeImage() {
console.log(avEl);
if (imgElement.src === img1Url) {
    imgElement.src = img2Url;
    playAudio(audio1);
} else {
    console.log("img2");
    imgElement.src = img1Url;
    playAudio(audio2);
}
}

function playAudio(audio) {
if(avEl){avEl.pause()}
avEl.src = audio;
avEl.play();
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search