Hi,
I’m new to Java, I learned some C++ in college so I understand the basics. I’ve made webpages using engines like wordpress or wix but never from straight html code so it has been a journey. I finished up the design portion of the page and went to add some on click functions. After looking into it, it isn’t possible to do what I would like with straight html. Hence why I started looking into Java now. I started taking the FCC Java course but I find myself struggling and getting stuck since there is no “watch video” button like there was with the html course. Unfortunatly, I’m on a very close timeline and I want to finish a project for a friend’s birthday as a gag.
What I Need to Accomplish:
-
I’m trying to make the img element of Pusheen a button that plays an array of sounds from youtube videos. I dont want the video to play just the sound. I’m not sure if thats possible so any way to play sounds from a url source or upload them from my pc.
-
The array need some type of control to make some items in it play less often then others so it seem like some are “rare”.
I greatly apperciate any guidence or help you are able to offer. Like I said time is important, I really want to give her this lame gift for her birthday.
Pusheen Img Element code:
CSS; .play { display: flex; width: 60%; panning: auto; margin: auto; self-align: center; }
Html; <img src="https://vignette.wikia.nocookie.net/camphalfbloodroleplay/images/f/f7/Parker_Pusheen.png/revision/latest?cb=20140523170402" alt="Play Button" class="play">
Project Link
Hey FuzzySlippers,
It looks like you will have to use some JavaScript (different language than Java) to do what you need here. I think there will be three main parts:
• Being able to trigger an event when the image is clicked
• Having a function to randomize your sounds
• Actually playing the sounds
For clicking the object you can use something called an event listener. Since you mentioned learning from videos, I suggest searching on youtube for something like “JavaScript click event listener”.
To get random numbers in JS you can use a built in function called Math.Random(). The MDN website has more info on this. You can use the random number to select from an array of sounds.
As for playing the sounds with JS, this article explains a simple way to do it. I haven’t used sounds much myself but I recall the downside from this method was you couldn’t play many sounds rapidly or multiple sounds at once. There is a way to do it for sure but I’m not sure without researching.
Hope this helps.
1 Like
Thanks for the material. I’m looking over it now, this is exactly what i was looking for!! As soon as I get home from the laundromat I’m going to take another wack at it.
Adult-ing always in the way of my coding. Lol
1 Like
Before i go ahead and implememt the math.Random() part. Would you mind either helping explain how to do it better or have a article/video explaining it?
Thank you again for the materials to review. After reading up a bit and putting 2 + 2 together I came up with the JavaScript below. However I’m struggling to understand how to link all my function together so they execute in a chain for the desired result. (as of now I didn’t try adding in the weighted values since it is really complex and I would like to at least get the script working before I break it again, lol.
<script>
//Global variables
var button = document.getElementById("playbutton")
//Array
playList [
"",
"",
]
// starts master functions for audio to play
button.onclick = function start() {
function getResult(min, max) {
min = Math.ceil(playList.first);
max = Math.floor(playList.last);
var result = Math.floor(Math.random() * (max - min + 1)) + min;
return result;
}
var songNumber = playList[result] // assigns songNumber variable to subarray on playList array
songNumber.play(); // plays songNumber variable
}
</script>
So my questions as of now are, will this method work to pick a song from the array playList? and can i use the variable result in bracket notation to assign a value to songNumber?
~Thanks!!
One thing I’m curious about: in your getResult(min, max), you’ve told the function you’ll be passing in a min and max value, then you promptly overwrite them. Is that your intent?
Yes, you can use result in the brackets, as you have done – given that playlist is an Array, and result should be a random number indicating an index to that array, then bracket notation is the right way (it would end up looking like playlist[4] or some such).
But if you simply want to have getResult randomly pick a song from the list, then don’t pass in min and max, as you’ll be setting them within your function. Instead, declare them within the function (using var, let or const. Personally, I’d consider const, as they won’t be changing.)
I’ll be honest here. I just took a base line of code from an article posted in this thread and just modified it to suit my needs. So to answer your question, I have no clue if that was my intent. Should i remove the min max and set it to getResult(playList.first, playList.last)? I honestly understand that part the least of everything I did.
So, for your needs, getResult() is a pointless name. Name the function something that will reflect what it’s actually doing. Something like getRandomTrackNumber(). With that, the code makes a little more sense.
function getRandomTrackNumber( list ) {
/**
* Note that I'm no longer passing min/max as parameters. Instead, I've set the playlist itself as a
* parameter. Why? Because, by doing so, I'm not tied to a global playlist. I can use any Array.
**/
// get the first and last indexes. The first is zero, the last is the length
// of the array itself
const min = 0,
max = playlist.length;
// get a random number within that range, and return that as the track
// number.
const trackNumber = Math.floor(Math.random() * (max - min + 1)) + min;
return trackNumber;
}
/**
* So, on click, we're going to get a random track number from the above function. Then, we'll get
* the track from the playlist at that index, and assign it to the variable nextSong.
**/
let nextSong = playList[ getRandomTrackNumber(playlist) ]
// Assuming that song element of the array can handle the play(), we can call that!
nextSong.play();
All of that could be wrapped in a function, and used as the event handler for the button.onclick;. You don’t need all the comments, but I do put them in in cases like this, where someone is learning what the code is and does.
I understand what you comments are telling me, but still not fully grasping it why it does what it does. The const and letare new to me.
I’m more lost then before. Like I said JavaScript is super new and I kinda bit off more then I can chew as i see now. 
So can I just take the function you provided and just attach it to my button.onclick = or do I have to create another function to call to it?
Will the nextSong.play() trigger even though it is not included in the function?
If yes, then how does it know trigger the .play() without it being a part of something besides the main <script> body in the correct order?
Does it execute commands just going down the lines of code in order 1 to X?
I also wanted to know can I use a url in my playList["URL"] array? Will the nextSong.play() be able to play this file since it is not uploaded directly to the site? If not how do I upload audio files to a site?
I’m sorry I struggle really hard reading something and applying it without videos or being able to speak about it before hand.
const and let are new-ish javascript. Simply use the var you’re used to, it will work just fine.
Wrap that code in your click handling function, like so:
button.onclick = function(){
// All that code goes here.
};
And I have no clue about the play() functions working or not, I don’t know what the content of that array is. If the array contains a collection of audio objects, with a play function implemented, then they’ll do just that. If it contains an array of song title strings, it will die a noisy and miserable death. At least, in the console.
And all that getRandomTrackNumber() function does is randomly select a track number. Nothing more. It determines the min and max as the range, creates a random number and coerces it into that range, and returns that. So, within the larger click handler, I set nextSong to a member of the playlist array. Which one? That’s determined within the square brackets with the call to getRandomTrackNumber( playlist ). I’m still in the click handler here, so it’s perfectly valid. Now, that nextSong variable contains whatever was in that array member, so (for example) nextSong may equal playlist[4]. So calling nextSong.play() would be functionally the same as calling playlist[4].play(), and would have the same result.
Long story short, yes. It should work. Depending on what is in the playlist array to begin with.
That makes a lot more sense when its explained that way. I’ll have to read more on it to fully understand.
I haven’t added anything to the array it is completely blank. By the way you’re phrasing it, I can’t source my audio from a youtube url or something similar.
I have never uploaded audio to a site. The only experience I have was in the FCC lesson about <audio> in HTML. So how do I even go about uploading these sounds?
Offhand, not sure. I’ll have to research a little.
Just a bit of thought here.
What if i used the <audio> in html and added a source and gave the audio element an id. Would i be able to give the objects in the array the document.getElementById("#")? That mught be a way around uploading them directly to the page.