Skip to main content

Audio and Player Controls

Add synchronized audio and use simple player controls.

Download Music: "メランコリ・ナイト"​

Download the sample music for the tutorial.

higma - メランコリ・ナイト / melancholy night feat.初音ミク - YouTube

YouTube to Mp3 Converter - YtMp3

Put the downloaded mp3 file in the "res" folder.

vscode file structure

Create Stream Audio Player​

Stream Audio Player is our built-in player, is a fast-load player thanks to streaming audio processing.

src/sceneBuilder.ts
const audioPlayer = new StreamAudioPlayer(scene);
audioPlayer.source = "res/higma - メランコリナイト melancholy night feat.初音ミク.mp3";
mmdRuntime.setAudioPlayer(audioPlayer);
info

By default, the browser does not have permission to play audio until the user interaction.

If audioPlayer.unmute() is invoked by user interaction, it is resolved and is also provided in the player control introduced below.

Create Player Controls​

Create a simple player control.

src/sceneBuilder.ts
new MmdPlayerControl(scene, mmdRuntime, audioPlayer);
  • There are not many customization available for player controls. This feature is for testing purposes only, and if you want more, you need to implement it yourself.