feat: Create a functional Music Player

[purnasth]

Describe your change:

Fixes issue #67

• [X] Add a Project?
• [ ] Fix a bug or typo in an existing Projects?
• [ ] Documentation change?

Checklist:

• [X] I have read CONTRIBUTING.md.
• [X] This pull request is all my own work -- I have not plagiarized.
• [ ] I know that pull requests will not be merged if they fail the automated tests.
• [X] This PR only changes one Project folder. To ease review, please open separate PRs for separate algorithms.
• [X] All new Project files are placed inside an existing directory.
• [ ] If this pull request resolves one or more open issues then the description above includes the issue number(s) with a closing keyword: "Fixes #67".
• [X] My code follows the style guidelines of this project
• [ ] I have performed a self-review of my own code
• [X] I have commented my code, particularly in hard-to-understand areas
• [X] My changes generate no new warnings
• [X] The title of my pull request is a short description of the requested changes.
• [ ] I have made corresponding changes to the documentation
• [ ] My PR needs documentation change

ATTACH SCREEN-SHOTS

| < After Image > |

[netlify[bot]]

✅ Deploy Preview for frontend-database ready!

Name	Link
🔨 Latest commit	370f67f454f503f63f3f97b46053e419d3673b85
🔍 Latest deploy log	https://app.netlify.com/sites/frontend-database/deploys/65395642f029700008139768
😎 Deploy Preview	https://deploy-preview-69--frontend-database.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[pr-explainer-bot[bot]]

Hey there! Looks like you need help summarizing the previous results into a Pull Request review markdown document. Let's get started!

Pull Request Review - Summary

Greetings

Hey team! 👋 Here's my review of the recent changes made in the code. Overall, great work! Let's dive into the details:

Changes

1. Added a new section 'MCU music player' with a link to the music player website.
2. Added an image in the README.md file.
3. Added CSS styles in the style.css file.
4. Added JavaScript functionality in the app.js file.
5. Added music files in the assets/music folder.
6. Added images in the assets/images folder.

Suggestions

1. In style.css, consider using more specific selectors instead of using the universal selector '*' for better performance.
2. In app.js, consider using event delegation instead of adding individual event listeners to each play button for better performance and code organization.
3. In app.js, consider using a switch statement instead of multiple if-else statements in the toggleRepeatMode() function for better readability and maintainability.

Bugs

1. In app.js, there is a potential bug in the playNextTrack() function where the playTrack() function is not called when isShuffled is true.
2. In app.js, there is a potential bug in the handleTrackEnded() function where the playNextTrack() function is called even when repeatMode is 'one'.

Improvements

In app.js, the playSelectedSong() function can be refactored for better readability and code organization:

const playSelectedSong = () => {
  const selectedButton = playButtons[currentTrackIndex];
  if (selectedButton) {
    const src = selectedButton.getAttribute('data-src');
    playTrack(src);
  }
};

Rating

The code has been rated 7.5 out of 10 based on the criteria of readability, performance, and security. Here's a brief explanation:

The code is generally readable and well-organized. However, there are some areas for improvement in terms of performance and potential bugs. The use of more specific selectors in CSS and event delegation in JavaScript can improve performance. There are also potential bugs in the playNextTrack() and handleTrackEnded() functions.

Conclusion

That's it for the review! Keep up the good work and let me know if you have any questions. Cheers! 🎉

[dev-AshishRanjan]

You can checkout our Idea-Arca, the project idea bank for any languages, for open-source contributions. The PR from this repo is being accepted in hacktoberfest2023

Happy Contributing season! Keep up the good work!