Create a Node.js-based server | Songle Sync Tutorial

Playground

For those who are not satisfied with Step 1-4 of the tutorial, this page digs a little bit deeper into development of practical Songle Sync applications. In particular, this page introduces how to create a Node.js-based server that serves as a Songle Sync master client.

This tutorial page is written for those who can write JavaScript programs. To experience Songle Sync without any prior knowledge of programming, Step 1 and Step 2 of the tutorial are good starting points. Also, search Songle Sync on Twitter might find interesting applications.

Before integrating Songle Sync features, let's start creating a very basic web server using Node.js. The leftside of the screen shows the code editor, whose content gets executed by clicking the Run button.
The rightside of the screen shows an emulated web browser that renders responses from the code you wrote on the left editor. By entering paths like /json and /index.js in the address bar, you can check the behavior of the web server.
This tutorial uses Express.js and Pug, both of which are popular libaries for implementing Node.js-based web servers. Each of them ease the server implementation and rendering HTML code, respectively. More details can be found on the libraries' website.

Node.js, Express.js, and Pug are partially emulated—meaning that only a selected subset of APIs are supported. The following list shows representative APIs with full support. If you want to continue working on the code, Download it and work in your local environment or scroll down to click the GitHub button to store it in GitHub and work in some web-based IDEs.

var express = require('express'): Express.js library is for implementing a web server.
var app = express();: Express.js server instance is created.
app.set('view engine', 'pug'): Pug.js becomes the default view engine.
app.listen(port): Wait for client connections on the specified port. Please note that this tutorial page connects the emulated server with the emulated browser regardless of the port number.

app.get('path', getRequestHandler): Use getRequestHandler to process GET requests to the specified path. The request handler accepts three parameters: the request object, response object, and reference to the next request handler.
app.use(requestHandler): Use requestHandler to process all requests.
res.render('path', options): Use views/path.pug to render the response. Property values in the options can be accessed from the pug files.
res.json(json): Use JSON.stringify(json) to render the response.

Once you confirm that the Node.js code works properly, use a PaaS to deploy the code and make the program available as a public web service. In general, such process requires installing a git client and other tools on your computer, configuring the environment, and finally, pushing the code to the cloud. On the other hand, this tutorial handles all the complex stuff in the background and allows you to do the same thing by just two clicks.

This tutorial first saves the code to GitHub. Then, it deploys the code to Heroku. Please create user accounts on both services.

Create a GitHub repository Deploy the code to Heroku

The procedure is almost identical to that of the prior example. Write code in the leftside and click the Run button to reload the server.
The rightside shows an emulated web browser that renders responses from the code you wrote on the left. Entering paths like /json and /index.js in the address bar immediately renders the result.

If you want to continue working on the code, Download it and work in your local environment or scroll down to click the GitHub button to store it in GitHub and work in some web-based IDEs.

var Songle = require('songle-api'): Import this library to use Songle Sync features.
var player = new Songle.Player(options): Create a player.
player.addPlugin(new Songle.Plugin.SongleSync()): Enable the Songle Sync feature.
player.addPlugin(new Songle.Plugin.Beat()): Enable the beat detection feature. There are also Chord and Chorus plugins that can be used to detect chord and chorus information.
player.useMedia(new Songle.Media.Headless(url)): Set the media at the specified URL to the player.

player.play(): Start playing music.
player.pause(): Pause playing music.
player.seekTo(position): Set the playing position.
player.position: Get the playing position.
player.duration: Get the duration of the music.
player.on('event', listener): Add a listener to the specified event.

Once you confirm that the Node.js code works properly, use a PaaS to deploy the code and make the program available as a public web service. In general, such process requires installing a git client and other tools on your computer, configuring the environment, and finally, pushing the code to the cloud. On the other hand, this tutorial handles all the complex stuff in the background and allows you to do the same thing by just two clicks.

Create a GitHub repository Deploy the code to Heroku

Summary of this step / Toward the next step

We hope you could successfully create a web server and make it publicly available by deploying it to the PaaS.

Elaborating the example code would make more appealing applications—for instance, how about an Internet radio station to which users can contribute songs on the web of their choices? We hope to see your applications soon!

Step. 1 Step. 2 Step. 3 Step. 4 Node.js IoT devices

Please input a repository name.

Create

Cancel

Creating a GitHub repository ...

Deploying the GitHub repository content to Heroku ...

Create a Node.js-based Songle Sync master server

Programming with Node.js + Express.js + pug

1 Develop a web server

2 Deploy the code

Controlling Songle Sync from within the Node.js server

1 Add the Songle Sync "master" feature to the Node.js server

2 Deploy the code

Create various kinds of web applications with Songle Sync!