Rewrite of music player workshop

[jdwilkin4]

Here is the workshop

https://www.freecodecamp.org/learn/javascript-v9/workshop-music-player/step-46

This workshop has always had some issues because a lot of campers don't fully understand the reasoning behind some of the design choices. After going through recently, I agree that this project needs a rewrite and better explanations for what is going on and why certain things happen. Better context will help beginners connect the dots.

[Faust-Levity]

I made a post on the FCC forum about my experience on this issue. I think I simply share the link for it:
https://forum.freecodecamp.org/t/build-a-music-player-revisited/778656

Some other thoughts:

What do you think about making a theory section for State management in the JavaScript certification?
I looked up the Curriculum and the first time students learn about States is inside the
"Front End Libraries - React states, Hooks, and Routing" module.
So if the "Build a Music Player" workshop in the previous JavaScript certification uses State Management best practices in a user-editable region, then I think students should learn about it before working with it in the workshop. (Beside writing more context to certain workshop steps.)

[jdwilkin4]

Yeah, I think one theory lesson introducing the concept of state would work.

I think the lesson can cover what is state, show some examples using objects and arrays, how update state safely, etc. We can have one of the curriculum team members add that to the existing audio events module.

[jdwilkin4]

Opening this up for other curriculum team members since I am tied up with catalog item work.

Here were my notes for the rewrite and the new steps

https://codepen.io/Jessica-Wilkins-the-decoder/pen/GgqVMJR

Feel free to change the order if you see fit but this workshop in general needs an overhaul.
We should use new ids in this case because it will be a new project.