The scrubber uses an input tag of type range, whose value attribute can be updated. To have a media scrubber that progresses forward as the song plays, one must constantly render the component and update its position accordingly. One cannot change the song of the audio tag with a simple update of the src attribute: it is necessary to pause and reload, the song in the audio tag. I realized later on that some properties go unnoticed by the audio element. The solution was to add a unique key property that would register as a change of state for the audio tag to trigger a rerender. A main challenge was that the audio tag was not updating after renders. I ran across some difficulties using the audio tag: some functionalities like autoplay are not available. The callback function above is used in the play button, while currentTime is used as a getter in the time display and a setter in the scrubber component. currentTime, the current location of the song, to manipulate the player. The reference, dioRef, points to the audio tag, allowing me to manipulate it: The player uses an html audio tag, controlling it with buttons and sliders connected via Refs in React. The resound player does the same, as all pages are made via frontend routes that do not send an http request. A main feature of the soundcloud player is its persistence as one navigates different pages. The audio player allows users to control the audio by pausing and playing the media, choosing where in the song to start, changing the volume, and looping the song. The application was built using a rails backend that accessed the database and managed http requests connected to a frontend that used React-Redux to build the app.ĪJAX requests are used for database accession to provide an uninterrupted user experience. Users can play any song that appears on the page and control playback with the song player. Resound is a Soundcloud clone that emulates its music player.

Resound app for desk top