This is a tutorial (or should be one) on how you add Audio to your Personal Page.
Audio Player with Volume slider:
<audio id="player" autoplay loop src="http://87.118.116.61:8010/;"></audio> <!-- the part after src= within the quotation marks is where your audio link goes to, this is currently a german internet radio -->
<!-- if you dont want the music to start on its own remove the word "autoplay" in the line above -->
<div align="center"> <!-- this div is for the position of the control buttons -->
<button style="background-color:transparent; height: 45px; width: 45px; border-radius: 45px;" onclick="document.getElementById('player').play()"><b> > </b></button> <!-- this is the Play button -->
<button style="background-color:transparent; height: 45px; width: 45px; border-radius: 45px;" onclick="document.getElementById('player').pause()"><b>| |</b></button> <!-- this is the Pause button -->
<!-- you can change the shape and color of the buttons as you wish -->
<b>Vol.</b> <!-- this is just plain text to let people know that the slider is to control the volume, you can delete this line if you want to -->
<input type="range" style="background-color:transparent; width: 100px;" min="0" max="1.0" value="0.5" step="0.01" oninput="setVolume(value)"/> <!-- this is the slider element used to control the volume
i recommend using 0.5 as start value that means 50% of the musics volume, because 1.0 respectively 100% is just too loud and will make people instant close your personal page
in case you dont want to have the slider you can remove that too, if you do you have to set the volume differently in the "script" part below -->
</div> <!-- this div closes the position of the control buttons -->
<div align="center"><sub>i do not own the song</sub> <br /></div> <!-- this is just a disclaimer -->
<script> <!-- in this script you can find the function that is needed to make the volume slider work -->
function setVolume(volume)
{
document.getElementById('player').volume = volume;
}
<!-- if you deleted the volume slider use "document.getElementById('player').volume = 0.1;" instead of "function setVolume(volume){...}" above -->
<!-- you can vary between 0 and 1.0 to adjust the volume -->
</script>
The following code is the Player with Images as Play and Pause button, the volume on this one is only adjustable in the code in the "script".
<audio id="player" autoplay loop src="http://87.118.116.61:8010/;" ></audio> <!-- the part after src= within the quotation marks is where your audio link goes to, this is currently a german internet radio -->
<!-- if you dont want the music to start on its own remove the word "autoplay" in the line above -->
<div align="center"> <!-- this div is for the position of the control images-->
<!-- you can change the src to the link of the pictue that you want to have as your buttons, they are just random buttons of the internet atm -->
<!-- you can change the size of the images by changing the width and height -->
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRxBh85zIsS7jwS7ZsEiRm34iHYiXBBjjknB0QtfrrurJRKlTQDsCpF1Gg" width="50" height="50" onclick="document.getElementById('player').play()" > <!-- this is the Image used as Play button -->
<img src="https://image.freepik.com/free-icon/pause-button-outline_318-40569.png" width="50" height="50" onclick="document.getElementById('player').pause()" > <!-- this is the Image used as Pause button -->
</div> <!-- this div closes the position of the control buttons -->
<script > <!-- in this script you can set the volume -->
document.getElementById('player').volume = 0.1;
<!-- you can vary between 0 and 1.0 to adjust the volume -->
</script>
if you have any questions feel free to ask me or use google :D
greetings Mag
EDIT:
added second version of the player with images as buttons, without slider and steady Volume
restatement