Click Image, Play Sound

click-image-play-sound.markdown

Click Image, Play Sound

A Pen by petula on CodePen.

License.

index.html

<audio id="myAudio" onended="audioEnds()">

  <source src="https://res.cloudinary.com/b1917/video/upload/v1613544387/codepen001/kid_laugh.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<div id='playbutton' onclick="thisPlayer()" type="button">

  <img src='https://assets.codepen.io/1312923/Play_dark+backg%402x.png?format=auto' id='image'>
</div>

script.js

let x = document.getElementById("myAudio");
let imgChange = document.getElementById("image");

function playAudio() {
  x.play();
  imgChange.src = "https://assets.codepen.io/1312923/Pause_dark+backg%402x.png";
}

function pauseAudio() {
  x.pause();
  x.currentTime = 0;
  imgChange.src = "https://assets.codepen.io/1312923/Play_dark+backg%402x.png";
}

function thisPlayer() {
  x.play();
  imgChange.src = "https://assets.codepen.io/1312923/Pause_dark+backg%402x.png";
 
}

function audioEnds() {

  imgChange.src = "https://assets.codepen.io/1312923/Play_dark+backg%402x.png";
 
}

style.css

body{
  
  background-color: #ae638e;
}

#playbutton {
  margin: 10% 50%;
}

img {
  width: 200px;
  margin: auto;
}

img:hover {
  cursor: pointer;
}