Playground

Create a Node.js-based Songle Sync master server

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.

Tutorial for programmers

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.

Programming with Node.js + Express.js + pug

1 Develop a web server

  • 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.

2 Deploy the code

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.

Controlling Songle Sync from within the Node.js server

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

  • 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 SW = require('songle-widget')
Import this library to use Songle Sync features.
var player = new SW.Player(options)
Create a player.
player.addPlugin(new SW.Plugin.SongleSync())
Enable the Songle Sync feature.
player.addPlugin(new SW.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 SW.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.

2 Deploy the code

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.

Summary of this step / Toward the next step

Create various kinds of web applications with Songle Sync!

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!

Creating a GitHub repository ...
Deploying the GitHub repository content to Heroku ...