Online Multiplayer Music Making Game

The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph.

Music

Time

• Low pass filter
• High pass filter
• Band pass filter
• Low shelf filter
• High shelf filter
• Peaking filter
• Notch filter(Band- stop)
• All pass filter

CSIT 5110 Multimedia Development Project

Thursday

Online Multiplayer Music Making Game

Other Messages:

Canvas divided into two parts:

I play a note.

I move my mouse.

I stop playing.

I change my instruments.

I change my nick name.

I change my filter.

I change the frequency value of my filter.

I left the game.

I sent the message to server, then the message broadcast to others by server.

one is the upper half of the canvas.

me

I want to join the game.

Initialization Information

Player Id.

Starting Instruments.

Users Who is playing the game.

Finish intialization.

Initial message.

But Why HTML5?

Web Audio API

Downloading sounds from the server

What happen

when loading the website?

HTML5 is a markup language for structuring and presenting content for the World Wide Web and a core technology of the Internet.

The Web Audio API is a high-level JavaScript API for processing and synthesizing audio in web applications.

Join Game Process

server

The second part is the bottom half .

1.A multi-player online game enable players to make music together.

2.Simple operations to play music with friends.

3.Apply filters on music.

1. PERFORMANCE

2. EASIER DEVELOPMENT

3. SECURITY

4. LOWER COSTS AND EASIER MAINTENANCE

5. PRESENTATION

Broadcast: new player.

others

APIs used in our project

How to share your music?

Development Tools

Canvas

JAVA

SCRIPT

After the sound processing...

+

Now let us have a look at the User Interface!

Dynamic

2D canvas to pseudo 3D Interface!

Is it support infinite client?

... ...

Ehanced our

websites

Message

• 1. How to share your music

Message

How to play sounds?

Audio Processing

That's all for presentation!

Thanks

User behaviour

May be we do not need

to introduce further.

• 2. Fantastic canvas

User Interface

What's in our project?

As a User,

Sound

Buffer

Visualization on canvas

+

Sounds processing on WebAudio

finalNodeN

......

finalNode1

finalNode2

filter

masterGainNode

compressor

audioContext.

destination

Q & A

I want to join the game.

I want to have a nick name.

I want to try different instruments.

I want to play or stop my music.

I want to play different frequency of the sound.

I want to change my filter.

I want to change the frequency value of my filter.

I want to left the game.

3 Control parameters in filter

(frequency)

(Q, value:0.0001 to 1000)

(gain, value:-40 to 40)

1,2,8 Q: Controls how peaked the response will be at the cutoff frequency.(3,6,7 control bandwidth)

4,5,6 Gain: The boost, in dB, to be applied. If the value is negative, the frequencies are attenuated.

Two Solutions:

one-point perspective

two-point perspective

Pros and Cons!

Group Number: B19

Group Member: Zhang Hao Hua

Au Fu Kai