How to make an image that plays audio when clicked

Question

I am trying to implement a button that plays audio. I don't want to have the slider.

Is there anyway to rid of the slider, or maybe use an image of a button instead?

Current code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Music</title>
<style type="text/css">
body {
        color:transparent;
}
</style>
</head>

<body onLoad="RandomSong();">
<audio id="content" src="background1.mp3" controls></audio>

<script>
function RandomSong() {
    var Music = ["background1.mp3","background2.mp3","background3.mp3","background4.mp3","background5.mp3"];
    var randomCode = Math.floor(Math.random()*Music.length);
    document.getElementById("content").value = "mp3=" + Music[randomCode] + "&amp;showslider=0&amp;width=5&amp;loop=1&amp;autoplay=0&amp;volume=50";
}
</script>
</body>
</html>

I have tried many things, and I have even gotten the image to show up. I just need it to play sound in a loop — DaFudgeWizzad, Oct 20 '15 at 21:35
http://pastebin.com/2c4wSuqZ I have the audio working, anyway I can replace the player with an image? Even better, anyway I could just hide the slider and only the play button is visible? — DaFudgeWizzad, Oct 20 '15 at 21:39

score 0 · Answer 1 · edited May 23 '17 at 10:30

There is a simple JQuery solution to this:

<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#track1').click(function(){
   $('#wrap').append('<embed id="embed_player" src="audio.wav" autostart="true" hidden="true"></embed>');
});
});
</script>
<img name="track1" src="images/track1.png" width="180" height="180" border="0" id="track1" alt="" />
<div id="wrap">&nbsp;</div>

Src: Check out this similar post with an answer from @blasteralfred: Play sound file when image is clicked

score 0 · Answer 2 · answered Dec 05 '16 at 02:38

I'm into making word games for kids, I been playing around with this code for How to make an image that plays audio when cicked. I hope this will help you I'm using Notepad++ this code works in Google Chome

<!DOCTYPE html>
<html>
<script>
var audio1 = new Audio("/Sound 1/Samples 1Sounds/CAT.wav ");
audio.oncanplaythrough = function(){}
audio.onended = function(){}
</script>

<input type="image"     id="myimage"style="height:200px;width:200px;"src="/Picture 1/Samples     Pictures/cat.jpg" 
onclick="audio1.play()">

<script>
var audio2 = new Audio("/Sound 1/Samples 1Sounds/dog.wav ");
audio.oncanplaythrough = function(){}
audio.onended = function(){}
</script>

<input type="image" id="myimage"     style="height:200px;width:200px;"src="/Picture 1/Samples Pictures/dog.jpg" 
onclick="audio2.play()">
</html>

How to make an image that plays audio when clicked

2 Answers2