css playlist code

[gampla]

I'm trying to add a playlist to a profile that uses css codes but I cant get it to create a content box and add a playlist/player in that box any help would be appreciated

[burnttoastnice]

CSS playlist? Are you trying to make a media player? CSS is used for mainly web animations and styling things

[gampla]

CSS playlist? Are you trying to make a media player? CSS is used for mainly web animations and styling things

trying to make one so I can play the music on my profile

 

something like this

[burnttoastnice]

Hmm. You could use an open-source one, but since you want to make your own I'll explain the concept of how I'd go about it.

 

First put the links to each song file into a javascript array. Then, put a HTML5 <audio> player on the page. Create a javascript loop to check to see if the song is playing, and whenever the song isn't playing, copy the next link from the array into the "src" attribute of the <audio> tag.

 

You can find all the events triggered by the audio and video tag here: http://www.w3schools.com/tags/ref_av_dom.asp

 

I'll head into a sandbox and see if I can make a basic working example to post here

[gampla]

Hmm. You could use an open-source one, but since you want to make your own I'll explain the concept of how I'd go about it.

 

First put the links to each song file into a javascript array. Then, put a HTML5 <audio> player on the page. Create a javascript loop to check to see if the song is playing, and whenever the song isn't playing, copy the next link from the array into the "src" attribute of the <audio> tag.

 

You can find all the events triggered by the audio and video tag here: http://www.w3schools.com/tags/ref_av_dom.asp

 

I'll head into a sandbox and see if I can make a basic working example to post here

 

im kinda out of my element here I do vb programming and program I can use like visual basic to create it and get the code after?

[burnttoastnice]

im kinda out of my element here I do vb programming and program I can use like visual basic to create it and get the code after?

 

Is the audio player going on the web after? If it is I'm not too sure if you can use Visual Basic (unless the user is using Internet Explorer, which used to have support for VBscript until IE11). I'll program it in JavaScript and comment at each stage what the code is doing.

[gampla]

Is the audio player going on the web after? If it is I'm not too sure if you can use Visual Basic (unless the user is using Internet Explorer, which used to have support for VBscript until IE11). I'll program it in JavaScript and comment at each stage what the code is doing.

 

preferably I would like it if some one view my profile it auto plays

[burnttoastnice]

preferably I would like it if some one view my profile it auto plays

Yup that's possible too. At the moment I've currently got the array set up and the song playing on page load. I'm getting the buttons working at the moment then I'll post the link and code here.

[gampla]

Yup that's possible too. At the moment I've currently got the array set up and the song playing on page load. I'm getting the buttons working at the moment then I'll post the link and code here.

okay thank you would it be a youtube link or a folderbased mp3 player?

[burnttoastnice]

okay thank you would it be a youtube link or a folderbased mp3 player?

 

That would be slightly more advanced. If you wanted a YouTube player that would be relatively simple - add all the videos you want into a playlist, then embed the playlist on your profile. The problem with that is the player wouldn't autoplay. YouTube may have an extra option for that however.

[gampla]

That would be slightly more advanced. If you wanted a YouTube player that would be relatively simple - add all the videos you want into a playlist, then embed the playlist on your profile. The problem with that is the player wouldn't autoplay. YouTube may have an extra option for that however.

something like itune windows media play sort of thing?

[burnttoastnice]

something like itune windows media play sort of thing?

 

The design that I'm doing is very basic, but you can make it look like Windows Media Player etc. afterwards using CSS.

[burnttoastnice]

**Edited: Forgot to add automatic song changing when first one finishes**

 

http://jsfiddle.net/burnttoastnice/dcLr67sv/6/

 

Here's the javascript code I used:

var songarray = ["http://freemusicarchive.org/music/download/b66485803595e63b257fd3849e253de9584a574f","http://freemusicarchive.org/music/download/7503117f38d0aae1ccf9e174c74e6b2d8213ae78"]; //this array contains all the songs.var lastsongplayed = 0; //variable containing the last song playedfunction first() //This happens when the page loads.{    song(0);    songtime();}window.onload = first; //This tells the webpage to run function 'first()' when it's loaded.function song(int) //this changes the song URL and plays it{    if (songarray.length > int)    {        lastsongplayed = int;        var string = songarray[int]; //put the song URL from the array into a variable        document.getElementById("currentsong").innerHTML = string; //change the 'currentsong' div to the song url        document.getElementById("currentaudio").src = string; //put the song url into the audio player        document.getElementById("currentaudio").play(); //play the song    } else alert("Song not found.");}function songtime(){    if(document.getElementById("currentaudio").ended) nextsong(); //if the last song finished playing, go to the next one        document.getElementById("data").innerHTML = "Total Songs:"+songarray.length+" Currently Playing:"+lastsongplayed; //show some helpful data        var currentPosition = document.getElementById("currentaudio").currentTime; //get the current song position    document.getElementById("songcounter").innerHTML = currentPosition; //put it inside the song counter    setTimeout(function(){songtime();},500); //loop this function after half of a second.}function pauseplay() //When the play and pause button is pressed{    if(document.getElementById("currentaudio").paused) //if the song is paused    {        document.getElementById("currentaudio").play(); //then play it            } else {        document.getElementById("currentaudio").pause(); // or pause it if it's playing    }}function nextsong() //this goes to the next song in the URL{    if((lastsongplayed+1)<songarray.length) //if the URL for the next song is in the array    {        lastsongplayed = lastsongplayed + 1; //then add the array position to the last song played        song(lastsongplayed); //and then play the song    } else {        lastsongplayed = 0; //else reset the array position to the first song        song(lastsongplayed); //then play that    }}

And here's the accompanying HTML:

<span id="currentsong"></span><hr><span id="data"></span><hr><span id="songcounter"></span><hr><audio id="currentaudio"></audio><input type="button" onclick="nextsong()" value="next"><input type="button" onclick="pauseplay()" value="pause/play">

[gampla]

how to I get it to play music from somewhere like dropbox mediafire ?

 

http://jsfiddle.net/dcLr67sv/19/ god this is confusing so how do I do it so I can put the player in on box and say a pic of a gt350r in another

[burnttoastnice]

how to I get it to play music from somewhere like dropbox mediafire ?

 

http://jsfiddle.net/dcLr67sv/19/ god this is confusing so how do I do it so I can put the player in on box and say a pic of a gt350r in another

 

To change the song URL, at the top of the JavaScript code you see this

var songarray = ["http://freemusicarchive.org/music/download/b66485803595e63b257fd3849e253de9584a574f","http://freemusicarchive.org/music/download/7503117f38d0aae1ccf9e174c74e6b2d8213ae78"];

To make it play your own songs, replace the links:

var songarray = ["Link Here","Link Here"];

You can even add more songs by adding a comma, then another pair of quotation marks:

var songarray = ["Link Here","Link Here","etc","etc"];

To put it into a box is fairly simple.Create a div and put all of the media player stuff inside it. In the example below, I called it myBox

<div id="myBox">   <span id="currentsong"></span>   <hr>   <span id="data"></span>   <hr>   <span id="songcounter"></span>   <hr>   <audio id="currentaudio"></audio>   <input type="button" onclick="nextsong()" value="next">   <input type="button" onclick="pauseplay()" value="pause/play"></div>

Using CSS, which is extremely simple to do, you would state a height and width for myBox.

#myBox{   height:300px;   width:300px;}

All done. For the box with the picture, create another div and put the picture inside it like so:

<div id="myBox2">   <img src="URL_TO_YOUR_PICTURE" width="100%"></div>

Edit: updated example http://jsfiddle.net/burnttoastnice/dcLr67sv/24/