Audio for your Personal Page

[MaGoHi]

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>&nbsp; <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

Edited November 4, 2015 by MaGoHi
Uses code tags

[Chewett]

Added the code tags, pmed you some suggestions.

[Kaya]

Please remove the "autoplay" from the first line. Nothing as horrific as randomly being attacked by music.

 

Also, there is no bold text in here, instead you should replace the part after "src="

[Aeoshattr]

Nothing as horrific as randomly being attacked by music.

[spoiler][/spoiler]

I feel particularly snarky this morning. Don't take it personally, just my terribad humor.

 

Also, there is no bold text in here, instead you should replace the part after "src="

Aren't the bold thingies  there to make the symbols used on the buttons bold (and thus more visible)?

[MaGoHi]

Please remove the "autoplay" from the first line. Nothing as horrific as randomly being attacked by music.

 

Also, there is no bold text in here, instead you should replace the part after "src="

 

1.)wrote another comment on how to remove autoplay, if you use the code reasonably you will set the volume to 0.5 or 0.1 as i commented above and thus wont attack you

2.) i rewrote that part for the link the bold format got removed on its own

 

thank you for your suggestions

[Kaya]

[spoiler][/spoiler]
I feel particularly snarky this morning. Don't take it personally, just my terribad humor.

 
Not at all :) feeling a bit snarky myself as well, so I can fully understand where that was coming from.
 

Aren't the bold thingies there to make the symbols used on the buttons bold (and thus more visible)?

 

The bold is a reference to "<!-- the bold text is where your audio link goes to, this is currently a german internet radio -->". So unless you want to force your love for German radio (the irony) onto the rest of the world, you'll have to change the value of src into something else like:

<audio id="player" autoplay loop src="http://remix.media.nin.com/data/uploads/1207088558g939.mp3"></audio>

EDIT:

By the time I found the song, it was already too late. Also realized that the most likely bold disappeared with the addition of the code tags.

Edited November 2, 2015 by samon

[MaGoHi]

I'd rather force the internet radio on people than what you have there :D

Edited November 2, 2015 by MaGoHi

[Syrian]

: D i now have music! the tutorial worked well to get it working in an isolated spreadsheet but what i needed was a little more complicated, but mago got it all working for me, thankies mago! (again)