Jump to content
MaGoHi

Audio for your Personal Page

Recommended Posts

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 by MaGoHi
Uses code tags

Share this post


Link to post
Share on other sites

Nothing as horrific as randomly being attacked by music.

[spoiler]2709244.jpg[/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)?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

[spoiler]2709244.jpg[/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 by samon

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Forum Statistics

    15,839
    Total Topics
    173,526
    Total Posts
  • Recently Browsing

    No registered users viewing this page.

  • Upcoming Events

    No upcoming events found
  • Recent Event Reviews

×
×
  • Create New...