Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Ryan Wells
7,354 Pointstrying to create a playlist web app.
I've tried using a conditional statement for this at first. when it ran it had no errors in the console, but did not function correctly. I'm tiring to toggle play and pause with a button. So now I'm using two li's in a ul and class swapping and my code looks like this.
var selectOne = document.getElementById(1);
var playOne = function(){
selectOne.play();
$("#_1").addClass("hidden");
$("#_1-1").removeClass("hidden");
console.log("swapping li");
};
var pauseOne = function(){
selectOne.pause();
$("#_1-1").addClass("hidden");
$("#_1").removeClass("hidden");
console.log("swapping li");
};
on the first click it swaps fine and logs to the console. On pauseOne when I click the button it pauses the audio but nothing logs to the console and the li's do not swap!!
Please help I'm new to JavaScript and jQuery!! I am making this from scratch basicly just to help me learn.....
THANKS!! :)
4 Answers
Marcus Parsons
15,719 PointsRyan,
I created a new solution for you. You should only be using one audio element on the page for a playlist. You only need one element because you only need one song playing at a time. What I did was create a little Workspace for you that's really simple but does what you want to do. There's a lot you could do to make this more efficient, but I came up with it in just a few minutes. It does the job, however.
Each button plays/pauses the sound it's attached to. I have two buttons on there so you don't get confused and can see what they do clearer. The two buttons are for a "guitar" sound and a "rain" sound. So, if you click the guitar button, it's either going to play the guitar sound if it's paused or if it isn't playing yet, or it's going to pause the guitar sound. And the same goes for the "rain" sound. It's a really easy concept of using if-else conditionals.
Here is the snapshot: https://w.trhou.se/jxwl873lda
Ryan Wells
7,354 PointsAh IC, I need to work on my conditional statements and when to use what. Thank you Marcus! I will build off this. My goal is not to use the browsers default player and to display the album artwork, title, artist, ect with random shuffle and repeat. I'm thinking of using a basic counter for loop for the shuffle, but one step at a time.
Thanks again for your input!
Marcus Parsons
15,719 PointsYou're welcome, Ryan. You can do all of that with the browser's default player! I haven't built a playlist app before, but if you are using a static playlist where the songs are only going to be loaded from your server, you could just insert all of the information into your JavaScript in arrays/variables and load it that way. If you were going with a dynamic playlist that loaded music from any source, it would be quite a bit more complicated because you'd have to read the ID3 tags and then display the information.
Good luck with the playlist project!
Ryan Wells
7,354 PointsI'm assuming I need to upload the songs to my web server and use the URL or the .src code wont work?
Marcus Parsons
15,719 PointsThey don't have to be on your web server, but you just need to make sure that you are legally able to stream the songs you provide and if you are legally able to use the songs, that the website you link to allows you to hotlink to their files. If you notice in the Workspace I made for you, I use sounds from "freesound.org". They aren't hosted on the server and they work just fine. =]
Marcus Parsons
15,719 PointsAn example of a dynamic playlist would be having a site that has access to millions of mp3s and letting the user input a song title and then displaying all the information about that song.
An example of a static playlist would be having a set playlist made (regardless of where each individual song's source is coming from). It is much easier this way because you can preset all of the information for each song beforehand.
Ryan Wells
7,354 PointsI uploaded them and it works fine! I'm not posting them on a page that can easily be seen by the public. My interest in the whole playlist app is actually kinda behind the idea of if I ever have the need for one, like creating a web page for a local band. If the situation ever arose I would have something for them to sample.
Ryan Wells
7,354 PointsAnd great point of only having one Audio that would be rather annoying hahaha.
Thank you so much for your help again!
Marcus Parsons
15,719 PointsYou're very welcome, Ryan! Get to work on your playlist, and if you ever need any more help, post back here and at least one of us on here will help you out :)
Ryan Wells
7,354 PointsSo far everything has gone smoothly but I'm finding myself in a pinch again. I'm now trying to program the shuffle and repeat one, all buttons. I have my tracks stored in an array and I'm thinking I could maybe shuffle the array when I select the shuffle button?
Array.prototype.shuffle = function() {
var i = this.length, j, temp;
if ( i == 0 ) return this;
while ( --i ) {
j = Math.floor( Math.random() * ( i + 1 ) );
temp = this[i];
this[i] = this[j];
this[j] = temp;
}
return this;
}
Marcus Parsons
15,719 PointsI wouldn't add to the Array prototype because there may come a shuffle method in the future.
I would use this function I found on Stack Overflow in this answer: http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
This function will shuffle the playlist array so that you can play from index 0 to length-1 and be totally random!
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
Ryan Wells
7,354 PointsMakes more sense, I'll give it a try. Once again thanks for the fast input!
Marcus Parsons
15,719 PointsNo problem, Ryan. I can't wait to see the final product! Give me a shout whenever you get it done. You can email me at admin@marcusparsons.com or go on my website: http://www.marcusparsons.com/contactme.php
Ryan Wells
7,354 PointsWill do!
Ryan Wells
7,354 Points<html>
<head>
<title>Playlist Project</title>
<link rel="stylesheet" type="text/css" href="css/Style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="cover"></div>
<div id="title"><label class="title">SONG TITLE</label></div>
<div id="artist"><label class="artist">ARTIST NAME</label></div>
<div id="controls"><button id="prev"><<</button><button id="play_pause">Play</button><button id="next">>></button></div>
<div id="tracker"></div>
<div id="volume"></div>
<div id="song_list">
<ul>
<li id="_1"><audio id="1" src="music/honor.mp3" type="mp3"></audio><button id="one" onclick="playOne()">Honor - Atreyu</button></li>
<li id="_1-1" class="hidden"><button id="oneOne" onclick="pauseOne()">Hobbbbnor - Atreyu</button></li>
<li><audio id="2" src="music/slow_burn.mp3" type="mp3"></audio><button id="two" onclick="playTwo()">Slow Burn - Atreyu</button></li>
<li><audio id="3" src="music/im_alive.mp3" type="mp3"></audio><button id="three">I'm Alive - Disturbed</button></li>
<li><audio id="4" src="music/sons_of_plunder.mp3" type="mp3"></audio><button id="four">Son's of Plunder - Disturbed</button></li>
<li><audio id="5" src="music/hard_to_see.mp3" type="mp3"></audio><button id="five">Hard to See - Five Finger Death Punch</button></li>
<li><audio id="6" src="music/the_bleeding.mp3" type="mp3"></audio><button id="six">The Bleeding - Five Finger Death Punch</button></li>
<li><audio id="7" src="music/vampires.mp3" type="mp3"></audio><Button id="seven">Vampires - Godsmack</button></li>
<li><audio id="8" src="music/voodoo_too.mp3" type="mp3"></audio><button id="eight">Voodoo Too - Godsmack</button></li>
<li><audio id="9" src="music/faint.mp3" type="mp3"></audio><button id="nine">Faint - Linkin Park</button></li>
<li><audio id="10" src="music/figure_09.mp3" type="mp3"></audio><button id="ten">Figure.09Faint - Linkin Park</button></li>
</ul>
</div>
</div>
<script src="JavaScript/script.js"></script>
</body>
</html>
Ryan Wells
7,354 Points#wrapper {
width: 300px;
height: auto;
background-color: green;
padding: 10px;
}
ul {
padding: 10px;
}
#song_list {
clear: both;
}
#controls {
width: 194px;
float: right;
}
#song_list li {
list-style: none;
text-align: left;
}
#cover {
height: 100px;
width: 100px;
background-color: #000;
border: 2px solid white;
float: left;
}
.title {
color: white;
float: left;
font-size: 20px;
padding-left: 10px;
}
.artist {
float: left;
padding-left: 10px;
}
body {
background-color: blue;
}
#song_list button{
width: 100%;
text-align: left;
}
.hidden {
display: none;
}
Ryan Wells
7,354 PointsCodes kinda sloppy at the moment haha just in the mock up stage. And I'm not sure why the CSS posted like that.
Marcus Parsons
15,719 PointsRemember to put a blank space above the first 3 backticks and a blank space below the last 3 backticks. Also, ensure that there is no text on the same line as the backticks except for the first 3 backticks which can only have a language specified. Check this image out for how to format your code for the forums:
Ryan Wells
7,354 PointsThanks! New to the forum as well.
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsHey Ryan,
There's nothing wrong with this code I'm seeing here. That's an odd way of getting an element id, but it works lol. We are going to need to see all of the code you're working with to diagnose this problem, because the problem does not lie within the code you have here.