| By: Paul S. Cilwa | Viewed: 4/25/2024 Posted: 11/17/2017 |
Page Views: 835 | |
| Topics: #Computers #Cross-fadingMusicPlayer #JavaScript #MusicPlayer #Programming #Projects #WebAudioAPI | |||
| A project demonstrating how to use the Web Audio API (JavaScript) to create a cross-fading music player. | |||
I've been trying to improve my JavaScript skills. This is a language I've not much experience with, but it's the third leg of the Web Design Stool. (The other two are, of course, HTML and CSS.)
I have always learned better by experimenting on a real project than by following tutorials from beginning to end. And the project I decided to work on is a web-based (in other words, JavaScript) music player.
There's a (relatively) new application programming interface out there called the Web Audio API. This API is supported by all modern browsers and can be used to provide far more sophisticated control of the playing of music and sounds than the HTML5 audio tag can manage.
Now, there are a zillion music players out there. But most of them do not incorporate the ability to cross-fade from one track to the next, and that's a feature I require (probably because I was once a radio disk jockey).
The goal in this project is to create a browser-based, cross-fading music player JavaScript library, which could be used by any web page to add music player functionality. As such, it's cross-platform, working equally well on any current browser whether on Windows, Apple, Linux, or Android.
Step 1: Creating the OrganicaAudio Project
| By: Paul S. Cilwa | Posted: 11/17/2017 |
Page Views: 724 | |
| Topics: #Computers #Cross-fadingMusicPlayer #JavaScript #MusicPlayer #OrganicaAudio #Programming #Projects #WebAudioAPI | |||
| The biggest programming journey begins with a single file. Or two. | |||
There are any number of web-page editing editors, as well as dedicated JavaScript editors, out there. You can use your favorite. But you can also use as simple a tool as Notepad to write a web page and/or JavaScript library. Firefox (my preferred browser) allows me to test JavaScript without having to upload or publish anything, anywhere.
Read more…
Step 2: The OrganicaAudio Constructor
| By: Paul S. Cilwa | Posted: 11/17/2017 |
Page Views: 727 | |
| Topics: #Computers #Cross-fadingMusicPlayer #JavaScript #MusicPlayer #OrganicaAudio #Programming #Projects #WebAudioAPI | |||
| Accessing an audio context from the Web Audio API. | |||
It's now time to open the empty OrganicaAudio.js file and create the constructor for the object that will encapsulate the Web Audio API. We can start by typing in some preliminary lines:
Read more…
Step 3: The OrganicaAudioTrack Constructor
| By: Paul S. Cilwa | Posted: 11/17/2017 |
Page Views: 729 | |
| Topics: #Computers #Cross-fadingMusicPlayer #JavaScript #MusicPlayer #OrganicaAudio #Programming #Projects #WebAudioAPI | |||
| Representing a single music track for the Web Audio API. | |||
It's now time to open the empty OrganicaAudio.js file and create the constructor for the object that will encapsulate the Web Audio API. We can start by typing in some preliminary lines:
Read more…
Step 4: Promises, Promises
| By: Paul S. Cilwa | Posted: 11/17/2017 |
Page Views: 726 | |
| Topics: #Computers #Cross-fadingMusicPlayer #JavaScript #MusicPlayer #OrganicaAudio #Programming #Projects #WebAudioAPI | |||
| Wrapping JavaScript promises around asynchronous operations. | |||
Because Javascript is an odd combination of synchronous and asynchronous activities—you want things to happen, but you must also be responsive to further user input—it has long needed a mechanism to allow asynchronous operations to complete before continuing to the next operation. The mechanism to accomplish this is called Promises and it is newly implemented in Javascript in all current browsers.
Read more…
Step 5: Playlist
| By: Paul S. Cilwa | Posted: 11/17/2017 |
Page Views: 756 | |
| Topics: #Computers #Cross-fadingMusicPlayer #JavaScript #MusicPlayer #OrganicaAudio #Programming #Projects #WebAudioAPI | |||
| Implementing the Playlist array and populator. | |||
We now have a proof-of-concept for the OrganicaAudioTrack class, in that we can use it to play an MP3 (or any other supported music file format, for that matter). But our goal is the ability to play a playlist of tracks, a whole collection of them. And since a playlist is a collection of tracks, it won't be OrganicaAudioTrack's job to manage that list. We need to return to the top-level object, OrganicaAudio.
Read more…
Step 6: Implement Pause/Resume
| By: Paul S. Cilwa | Posted: 11/18/2017 |
Page Views: 987 | |
| Topics: #Computers #Cross-fadingMusicPlayer #JavaScript #MusicPlayer #OrganicaAudio #Programming #Projects #WebAudioAPI | |||
| In this step we'll add the ability to pause and resume the currently playing track. | |||
Any music player needs the ability to pause and resume playback at any point, at the user's request. When I started researching how I might accomplish this, I found a lot of posts bemoaning the fact that it was so difficult, or impossible. However, those posts were years old. The Web Audio API has been undergoing improvements since its introduction; it now includes suspend() and resume() methods. However, I feared that I would need to save the time the current track was paused, as most of those older posts suggested, and use it to restart the track at that offset when the user wished. And, since we will have two start() operations in the queue at the same time (the current track and the next one to be played), I was afraid I would need to also cancel the track that was waiting, and then do the calculations to figure when to re-schedule the start() for that track as well.
Read more…
Step 7: Skip To My Lou (+/- 30 Seconds)
| By: Paul S. Cilwa | Posted: 11/18/2017 |
Page Views: 741 | |
| Topics: #Computers #Cross-fadingMusicPlayer #JavaScript #MusicPlayer #OrganicaAudio #Programming #Projects #WebAudioAPI | |||
| In this step we'll add the ability to skip a few seconds ahead or behind on the currently playing track. | |||
Here's how to implement a skip ahead function.
Read more…