I need simple instructions to be able to play my MP3's from the Playlist Generator. They worked at one time but not since Flash is gone. I've read other posts about JVideoplayer but it's over my head. Someone said to use UTube........but how? HELP !!!

Beverly,

I see there have been no responses to your question so I'll take a stab at it. It's hard to get any easier than Jack's JVideoplayer.

Simple instructions to using his player.
1 go to his player creator site (Click Here)
2 open a different window on your browser, go to YouTube and find the video/music that you want on your site and copy the URL. To copy the URL, click in that field, it should all highlight immediately (if it doesn't, click Control A to select ALL, then Control C to copy it).
3 go back to the JVideo page and paste the URL in his "ADD URL blank" and hit the "Add URL" button. This will insert your chosen video in his player.
4 if you want to add more music, hit "Clear URL" and enter the next music URL. Repeat for all music/videos that you want to add
5 when you're finished, hit the "CREATE" button and the whole thing will be created and automatically highlighted so that all you need to do is copy it.
6 place your cursor over the highlighted section and hit Control C to copy it. (Hold down the Control Key and hit the "c" key.)
7 go to the page where you want the player and change to "Source" (upper left corner of the editing screen).
8 hit paste (Control V) to paste the code to your page
9 save the page and you're done.

If you want to put the player at a certain spot in an existing page, an easy way to locate the spot is to enter some text to mark the beginning of the place, hit enter, then more text to denote the end of the location. For example, I enter AAAA, then hit the enter key, then BBBB. When I switch to the SOURCE, I look for the AAAA and move to the blank line immediately following and hit Control V to paste the code at that point. Then I switch back to normal text (rather than Source) and delete only the AAAA and BBBB.

It's actually easier than it sounds and as far as I am aware, any other ways to accomplish this are significantly more difficult.

If you're still worried about trying this, create a new page to experiment on. It should work just fine, but if it doesn't, all you need to do is delete the page and no harm done.

Good luck with your site.

Thank you for the response. I will check it out. Appreciate your help.

Oh my Gary......thank you so very much. I looked at the earlier info on Jack's Video player, but like Beverley, it is over my head. Your breaking it down is just what I needed. I have printed it and will tackle tomorrow. It looks very clear as what to do.

Thank you Gary. I have a lot of music on my website and put a lot of time into making them all MP3's years ago, so I am thrilled that we can have music again.

Blessings for a great year.
Tracey

Thanks Gary for the steps. I could copy that and add another section. The tab labeled "Instructions" gives an overview. The easiest way might be to make a basic section and then just add the MP3 links.

This is the basic code for MP3 links (you can mix Youtube video and MP3). Add links as shown. All links except the last have a comma at the end. The text after the link is the description. The generator does all that automatically. I left all the options off to show the default view. You can change the color, font size, etc. Samples in docs show the variations. Most people pick the default style.

I noticed a small mistake I made if you only have MP3. It doesn't show the top image until you click. The original code was using Youtube videos for music as this example shows

<div id="JVideoPlayer">Video/MP3 Starts Here</div> <script> var VplayList=[ "heading Music Videos - Ricky Nelson", "0janfcZ8LUw Ricky Nelson - Travelin' Man 1961", "heading MP3 songs", "https://www.classcreator.com/000/7/7/0/13077/userfiles/file/Stairway_to_Heaven_-_Led_Zeppelin.mp3 Stairway to Heaven - Led Zeppelin", "https://www.classcreator.com/000/7/7/0/13077/userfiles/file/Music/Michael%20Jackson%20-%20Beat%20It%20(Official%20Video).mp3 Michael Beat it - Michael Jackson" ]; </script> <script src="https://www.classcreator.com/000/7/7/0/13077/userfiles/file/html/JVideoplayer.js> </script>
Just copy and psste the code above into a test page in Editor SOURCE mode to see this example. Then play with adding your own links.

I'm glad you all found it useful! As Jack mentioned, the KEY to making this work is to have a comma at the end of every line EXCEPT the last line. The very last video Does Not have a comma.

If you've modified your play list and it does not work, more than likely you have a missing comma. Check this first. You may have also have missed the double quote symbol at the first or last of the line, but I've found the comma is the most likely suspect.

This should get everyone started, but Jack has a lot of bells and whistles you may not immediately notice.

One is the ability to play only a selected portion of a video. Let's say you want to play ONLY a Segment of the video, add brackets inside the Quote marks on the video and put the number of seconds to skip as the first number, a comma, then the ending number of seconds as the second number or Zero if you want it to play to the end. Skip the first 6 seconds and play to the end, insert [6,0] anywhere in the line AFTER the play code.

For example, let's say the music in a video doesn't start until 6 seconds after the video starts and you want to play until 3:28 seconds, your line for that music video would look like this:
"NYmn2aS9KWU [6,208] The 5th Dimension - Sweet Blindness", or
"NYmn2aS9KWU The 5th Dimension - Sweet Blindness [6,208]",

Now you will probably notice that we want the video to play until 3 minutes and 28 seconds, but we have listed 208 as the stopping point. That is because 3:28 IS 208 seconds.

3 minutes X 60 seconds (in a minute) = 180 seconds, plus the additional 28 seconds. 180+28=208.

Check it out by creating a playlist and manually place this line in the code. Try it first without the [6,208]. You'll see the opening announcement and the ending credits, and as much as I appreciate Laura Nyro writing the tune, I don't always want to read about it while I'm waiting for the next song.

Try it again with [6,208] and you'll skip all that.

I'd tell you to create a playlist with both listed, say without the brackets as song #1 and with the brackets as song #2, but for some strange reason, if the same YouTube code appears on consecutive lines, the player skips the second one, or jumps to the previous listing if they are separated by other lines, say the same song code appears on line 7, and also on line 123, when the player hits line 123, it automatically skips back to line 7 and continues to play from there, lines 8, 9, 10, etc. until it hits 123 again.

Jack, have you ever noticed this? I just did for the first time yesterday. I don't know if it's always been this way or not? It would be nice to be able to have the same song appear in several different locations, (realizing I could (usually) find the same song with a different code.)

What do you think? Any way to prevent the skip backs?

OK, talk about a run on post. My apologies, but some might find this helpful.

YouTube video codes. Here is an example of the full URL
https://www.youtube.com/watch?v=Oy625sZAHN8

YouTube code consists of the 11 digits AFTER the = symbol and before anything that might follow, as it does in a YouTube compilation (group of songs).

For example: https://www.youtube.com/watch?v=SbyAZQ45uww&list=PLs5nLtKbGBVOZBCzgXxcN9fyCz6sQ1fab

The first video is the part after the equals sign and Before the Ampersand "&".

If you want to create a playlist using every song that comes up in the compilation above, copy the entire URL line into Jack's player. If you only want the first song, copy only the first video code portion, that is the part after the = sign and before the & ampersand sign.

On occasion, when you copy the Compilation URL into Jack's Player (JVideoPlayer) may say "could not "start". If this happens, delete everything after the first code and try again.

How do you get the next song in that same playlist? Simply skip to the next song in the list, (you do still have that playlist open in another window, don't you?) the URL will change.

Copy the new URL into Jack's player creator and try again. It may not "start", but usually, after advancing 3 or 4 more videos and trying it again, usually it will "start" and take off and place all the remaining videos in your new playlist.

I'm sure most of you all know that to copy a YouTube URL, you click on the URL line and everything is normally highlighted so you can do Control C to copy it. If the entire line is not highlighted, run your cursor over it to highlight it.

Control Codes: Hold down the Control key, hit the C key, then let go of the Control key) and the URL will be copied into your computer's memory. Move to where you want to paste it, and hit Control V to paste.

Control A highlights ALL.
Control C will Copy.
Control X will copy and delete whatever is highlighted, but you can still Control V to paste it somewhere else.
Control Z will undo what you just did
Control Y will re-do it
Control W will close the window you are in

But, did you know that on a YouTube URL line, you can double click quickly and it will normally highlight just the "Music Code" portion of the entire URL line? I just discovered this a few minutes ago. I love new tricks, well, new to me.

Quote:

This is original Discussion about duplicates back then.

Looking at it now and saw a few things I need to make it do duplicates again by adding a suffix to Youtube IDs. Will update here when it's working again.

WOW,we sure covered some ground back then! I'll keep an eye out. Thanks!

Should work as described in original topic. Add a unique suffix to duplicate Youtube ID(s). Haven't extensively tested to make sure I didn't break something - but my main test page with variations appear to work.

Jack, I tried with the same song duplicated 5 times with the suffixes 1-5 added on at the end of the 11 digit code. I assume this is what you mean by adding a suffix.

I could play each by clicking on it, but when it finished, it would jump back to #1. Clicking to advance did not advance unless I clicked fast, then I could advance to any line that I wanted, but when it finished playing, it would always jump back to #1. This is using Pale Moon 29.1.0 (most current). Tried on Chrome, Firefox and Opera with the same results.

Obviously no in depth testing, just FYI observations so far.

I didn't see that, but it is jumping an extra step. It's like the video ending code sent by Youtube is not the same as ending status for a regular video. Might have changed over time.

Can you post using the "code" tool here what Videos you are viewing and the time.

Needs some volunteers testing help.

I tested on all main browsers - Edge, Chrome, Firefox Opera. Need someone to test on Safari and iPhone since old Safari is all I have and that must not support a new loading sequence/code I'm using. Might have to go back to old -

Not released yet, but this is a TEST version, don't use permanently since it's just there for testing.

See if these links work on your devices

List of MP3 and YouTube music videos

MP3 and Videos

List of DUPLICATE videos with time selections - [start,end]

NOTE ** these are test pages only thus vary over time **

Jack, I tested on iPhone and it worked fine. Good on iPad also. Both with Safari.

That's a relief. Thank you Phil.

(probably old Safari does not support some fairly common Javascript loading stuff - window.onload specifically. I used a timed loop before.)

Jack Vermeulen wrote:

Seems to be any video that is duplicated. Click Here for an Example #2 and #9 are identical. Click on #9 and it will default to play #2.

I also looked at using the brackets to start and stop at locations rather than start and finish. That doesn't appear to affect it. They all default to the first appearance.

Take a look at 2 & 9; 13 & 19; and 23 & 28.

Got the same results with Pale Moon, Chrome, Opera and Firefox.

Tested 3/18/2021 at around 12:20 am CDT

EDIT 12:55 am CDT
Oops, just checked out your duplicates link and see you've already fixed this in the test version.

The current list does not have suffix added to make them unique. Maybe you were experimenting?

Revised Version now active. Docs updated with new options

Click Documentation in this LINK for JVideoplayer

Jack Vermeulen wrote:

Moving on, I tried adding a suffix to the YouTube Video Code within your player and it worked well. I may have missed the addition to your instructions. If I missed it, my apologies. If not, I humbly present one possible description.

"If your playlist has a duplicated code, it may cause the player to loop repeatedly between the duplicates. JVideoGenerator looks for and deletes duplicates, however they may be created later if you add code to your playlist.

If you want the same video/code to play more than once, add a suffix to the code. For example KbJOsej3ZK0 may become KbJOsej3ZK0-1, KbJOsej3ZK01 or KbJOsej3ZK0A, etc."

Thanks, I'll add that and hope it's read

You know we only read instructions as a last result. LOL

Good point about adding a dash with the suffix for easy identification!

One of our classmates is downsizing and he located LPs made by our sound crew of our HS musicals and concerts over 50 years ago. He converted them into MP3 files. I would like to put links to them on a new CC page either directly through the file vault or through embedding on a third party site. Not sure how to create codes. Any thoughts or suggestions? The sound quality is amazingly good. Thanks.

Ben Bialek
Walter Johnson Class of 1969

Store them in your file vault. Use JVideoplayer to play (does both MP3 and Videos).

Instructions for putting on any page and latest update in THIS POST

You can put multiple MP3 in a single playlist.

Should be simple if I explained it well enough

It’s March 3, 2022. Are we still able to embed music on our web pages since there’s no more Adobe Flash! And if not, is there another way around it. If there is (I was able to do it 4 years ago),can anyone tell me how in an “Embedding Music for Dummies” step-by-step way? Would be more than grateful for the lesson.?? plgolf1023@gmail.com

CC still does not do simple MP3 playing. Interesting because that's the easiest of ALL to do. I did the Youtube videos first because there is so much free music out there and doesn't take any file vault space.

However, just look at my prior post #22 for links that show how to easily do this with JVideoplayer. You store the MP3 in your file vault first.

The editor source mode is used to put the code on a page. If I had access to the front-end of CC, it could be way easier ... but I don't

Gary, you are the best instructor! I found this old thread and was able to load Jack's JVideoplayer to my Home Page! Only added one YouTube video, but that's a real start! Now I want to add the Jukebox player to "house" the list of music I want to play. Can you give me instructions to do that? I'm not a coder and I'm pretty old, but I do have enough sense to do your 1.2.3 steps.
Anything you can do to help me I would appreciate. Between you and Jack I am going to look really, really smart! Thanks for helping me.
Leahray

Hi Leahray,

Thank you for those kind words! Sorry for the late reply but I just had a chance to check my messages.

You've made a good start on your website I see. I loved your "Why Did the Chicken Cross the Road?" and I've already "borrowed" it. Thank you!

As far as how to add the video player to house your songs. I suspect that you are asking how to add the image of the Juke Box, for that, I'm afraid you'll have to ask Jack. I love it, but haven't taken the time to figure out how to do that one yet.

But, on the off chance you are looking to add music more to your current play list, adding more can be done in several ways, since you've indicated you currently only have a single song, the easiest way is to delete your current playlist and add a new one. Pull up Jack's JVideoplayer and add your first (existing music) again, then add the rest of the music you'd like to be able to play. Jack's program will write the code for you, copy the code like you did before (be sure to delete the music player code that is on your Home Page first), then open "Source" on your Home Page and paste the code in. Save the page and you're done.

Now having said that, my suggestion is to try this on a New Page first. Create the New Page, change to "Source", paste the code, save and then preview the page, that way if something doesn't work quite right, it will only affect the new page. If it works, and it should with Jack's Code, copy and paste it on your Home Page. This suggestion is really just for other times you are creating something new, sometimes, if you copy text from another source, it will include hidden code that could mess up your Home Page. Try it, if it works, copy it to your Home Page.

If it messes something up, the easiest way to clean the hidden formatting and codes out of the material is to copy the text and paste it into a text editor like notepad. This will also strip out the existing formatting and often the paragraph dividers which can be a lot of work getting reformatted.

Anyway, the "Other" way to add songs to your playlist is to follow Jack's format and type everything in by hand, each line starts with the double quote mark and each line except the very last ends with a double quote and a comma. The very last line omits the comma. If you do it this way and it does not play, the first place to look is to make sure each line has the comma at the end.

After the double quote mark at the beginning of each line is the YouTube 11 digit code, a space, the title, group and description if desired, the ending double quote and the final comma.

Once you get more familiar with the process, you can copy your current playlist (again switch to Source), copy just the music portion, you can "Import" this into Jack's player, save, add more music, create, copy and paste, but let's save that for another time.

Also, bear in mind that you can only have one playlist on the page, unless you give the second one a different name when your are creating it, playlist, playlist1, playlist2, etc. But I'd save that for later, just delete any current players. You might consider cutting them out and pasting them to a junk new page, before deleting them altogether, just as a safety measure.

Best of luck with your website! You're off to a good start!

Tim (Admin) wrote:

Hi Tim,

Great to see you taking this on and best of luck on your website! You had sent me a private message. I hope you don't mind me posting it, but if you have the question, there are probably many others that have the same question.

I'll be glad to answer your question about how to add a song to the MP3 player in the text below, but when you mention adding it to your slide show, I'm not sure that is the answer you need. The JVideoPlayer will play the songs, but also any videos associated with them. It sounds like you'd like to use your own photos and have a music track that plays along side.

I think what you're needing is a little different and I'm afraid I've gone blank on the how to do the slideshow with associated music track.

I'm going to have to defer to Jack Vermeulen (creator of the JVideoPlayer) and his Instruction Page and also the Documentation Page for this. I would also recommend visiting his website (look above until you find his name and click "Visit Site"), you can see some interesting things including his photocube. Perhaps Jack can shed some light on how to combine music and your own photos.

Jack, do you have something that will do this?

But to answer the question, how do I get songs into the player creator, first, find the song you want on YouTube, copy the URL or just the 11 digit code for the song (some URL's will include a playlist that goes beyond the 11 needed for one specific song.)

Well, let me back up. When Jack's JVideoPlayer comes up, look near the center, you see that green line? That's where you are going to want to paste the URL or 11 digit code.

I normally hit Clear URL and Clear All (not really sure if this is necessary). I usually go with the Player Style Zero with the video on top and the playlist below, but that's just personal preference. I'll select the Record MP3 image to be displayed if there is no video to the song, again personal preference.

From there you can use the preset sizes on width and height, playlist width, but I change the height to 400. This allows a taller window to show more of the playlist. I often have a 100 songs, so I like to be able to see more at a glance, but if you have 20 or so, the current size should work just fine.

The next thing are the checkboxes. If you have a "responsive" website design (highly recommended) that resizes based on the screen it's being viewed on, cell phone, tablet, laptop or desktop, be sure to check responsive and autosize, I like to set it to loop so it will run continuously.

Error Stop, will either will keep playing the music if it encounters a song that has been deleted or it's owner banned by YouTube, or will stop playing depending on whether the box is checked or not.

Once you have the songs added
Hit create on the left side and the code window will open with the code already highlighted. Just hit Control C to copy the code, then, when you are back on your website page where you'd like to place the music player, This is very important. Click SOURCE (top of the edit window, left side). GO to the place on the page you want the player, click on it and hit Control V to paste the code. Hit either Save and Preview or Save and Exit, then preview the page.

Now it is possible to add songs to an existing playlist, import and export your current playlist into Jack's Generator to add additional songs, but let's save that for later.

Whenever you are creating something new for an existing page, I find it safer to create a new page, using a throwaway page name like asdfsf or qwerty, add whatever you like and if it works, copy it onto the existing page or delete the page if it messes something up. This is frequently caused by copying an article from another website, although you might not see it, the material can often contain hidden code what could cause your website to suddenly get very wide about half way down the page or overwrite text. Posting to a "Junk Page" can be safer.

Best of luck!

P.S. Any time you ask a question or find something of interest, I highly recommend bookmarking it and add a description so you have a chance of finding it again.

Thank you Gary and Jack for all this wonderful information. After creating my playlist/YouTube videos on Jack's JVideoplayer, I successfully added it to my homepage. It plays beautifully; however, it appears as a long skinny version. Is there a way to adjust the margins a little bit?

I am attempting to add a snapshot of my page with the JVplayer in it for your review. Any tips would be greatly appreciated. Thank you!

The combination of being an announcement and inside the smaller area on classic is giving incorrect values. I'll have to see why it thinks it should be 120 - that's the "narrow" value.

-----------------------

PS. I checked a little and indeed CC is generating a table size of 144. It's the "class=announcement". So what CC does is attempt to predict?? what the width of the announcement is and then sets the table size. That explains some comments s long time ago that must have been caused by exactly the same issue.

FIXED, but modify the width to be valid (its 950) and reflect the video size ratio desired. Autosize=1 will use your size ratio and adjust the video size accordingly.

Fixed/adjusted specifically for Classic Page Announcement on a page. Responsive does not appear to have announcement sizing issue.

For Classic Only, width max is always 440 wide if there's an announcement. Other pages are 685. Also ignores invalid values as the width of 950 in this case. Some prior displays with vautosize will look a bit different and more like vresponsive. Video area respects the relative size proportions if they are valid - iow it scales as desired.

Thank you, Jack! I had missed seeing your responses until now. Whatever it is that you did, it seems to have corrected the re-sizing of your JVideoplayer on our Class page. It is working beautifully now, just in time for our 45-year reunion! You are truly appreciated.