Picture with mp3 file

[jamesadrian]

I would like to put a png picture together with an mp3 sound file on an HTML page so that the visitor to the page can choose to hear the sound file while looking at the picture.  I think I one knew, but I forgot. Is there a tutorial I can look at?  I have a lot of experience making web pages that have mostly text and pictures.

Thank you for your help.

 

Jim Adrian

 

 

[Ingolme]

You can use the <audio> element to add music to the page. It's very simple: https://www.w3schools.com/html/html5_audio.asp

[jamesadrian]

Ingolme,

 

Thank you for this information.  Here is the result:

https://www.futurebeacon.com/JA3.htm

 

Jim Adrian

 

[jamesadrian]

I have a problem with the code in Safari but not in Frefox.  It does not always show a volume control in Safari.  It may be that now it never does.  I have been changing small details.  What determines the appearance of a volume control?  This is the code now:

<div style="position: absolute; top: 100px; left: 30px;">

<audio controls>
  <source src="https://www.futurebeacon.com/JA3.mp3" type="audio/mp3">
  <source src="https://www.futurebeacon.com/JA3.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio.</p>
</audio>

</div>

Thank you for your help.

 

Jim Adrian