Can I include this ReactJs project in my Electron web application?

Question

I'm a beginner in JavaScript and I'm building a web application using Electron.js for my class project. My projects are now all JS, CSS, and HTML code.

This is the homepage of my program on codepen.

[Codepen](https://codepen.io/Shant7/pen/NWLJZge)

It has an index.html page that is the login page/username for the user. Then the homepage.html page has a navigation bar where users can click on different html buttons to go to various features. The other features we have now are all made with HTML, JS, and CSS.

We hope to use this tutorial https://www.youtube.com/watch?v=I1cpb0tYV74&t=3595s to integrate Spotify-like functionality where users can search and play music.

Here is also the code for this tutorial https://github.com/adrianhajdin/project_music_player. It uses Tailwind, React, Redux and RapidApi.

I'd like to ask if this is possible, and if so, do you have any tips or suggestions on how to incorporate this functionality into what we already have?

I've tried looking for ways to do this using just Js, HTML, and CSS, but I haven't found any tutorials that allow users to play songs, which is the main purpose of this feature.

Answer 1

Yes! You can do this using plain HTML CSS JS, you just have more work to do with the music player logic and styling.

I've provided you here with a minimal example html page that contains a play button for playing/pausing an audio file in a URL. You can replace the URL or use Javascript logic to replace the src attribute within the tag to implement a Spotify-like music player on the page.

  
    
  
  

    sssccc