Forums

Hey gang, I'd like to make a VGM player for smspower that has a specific UI, and that can be added to any of the Music pages, for example here.

The playback code is already written and working fine, you can see a demo here. It supports both YM2413 and SN76489.

And over here you can see one made with AS3 (Flash), with the working keyboards display.

What I'd like is a specific SMS UI, so for example the seek cursor can be the snail from Wonder Boy, the seek bar can be the ground from Wonder Boy, and when you grab the snail, it curls up, using the sprite for when you kill it.

Since the emulation code is all JS, it can do as much as we want, including drawing the notes on keyboards, like mmdsp or having a piano roll effect like nsfplay synthesia.

We can display the intro length and the loop length and the fadeout length on the seek bar.

The player should be able to be configured in several ways:

Mute/unmute channels
Set volume
Set playback speed
Number of loops
Fade-out length
Visualisation type: keyboards (mmdsp) or piano roll (synthesia)
Shuffle / repeat / repeat one song
After playlist ends a checkbox to go to a random music set, or one that you choose
etc. etc.

It will be able to display all of the VGM info, such as the GD3 tag info, the chip frequencies, the number of samples in the loop, total samples etc. So all the VGM header info and the GD3 info.

I'm not very good with design, so I could use some help just getting a starting point mockup. It has to fit into the existing music pages, in the place of the playlist table. Later we can extend the player to support one-off VGMs, for simple embedding, like in the Homebrew list.

As you can see, there are 9 + 4 keyboards, those are 9 YM2413 channels and 4 SN76489 channels. Perhaps the noise channel on the SN can be displayed differently, and we usually won't need to display the YM channels, only the SN channels, so normally it would be smaller.

Anyway, I made a very poor mockup on this page. There is playback, but no seeking or volume controls, we can add those when we have a proper UI design, or at least a good starting point.

Get creative and have fun!

Just wanted to mention the in-browser VGM player that I've added to project2612 recently, thanks to wothke's effort. However, the player on project2612 is compiled with emscripten, so is a bit different than the player that we have planned here for smspower. Also, I estimate our player will be only about 100KB un-minified and un-gzipped.

I've made it so now you can seek and mute channels. Next step is to improve the way it looks, a bit.

I've also noticed some packs have the YM2413 clock set, but no YM2413 commands are used. I was thinking of generating warnings based on issues my vgm player finds, such as unused chips, strange clock speeds, and inaccurate sample counts.

Also, I'm thinking of removing the keyboards, just to favor a simpler player that we can deploy, and we can add visual effects later on.

I've decided to make two versions of the player - a really basic one, just to get going, and later a more complex one, with all the features described above, and more.

The simple one will just have play, prev, next, volume and seek. I'm thinking of making it appear only when WebAudio is available. Otherwise the pages look normal.

The more complex one can go in playlist pages, such as http://www.smspower.org/Music/PuyoPuyo2-GG-Playlist

Hey vampirefrog,

I've a thing in progress which works, basically:

http://vgm1.impulseinformatica.com.br/

I have some ideas to finish it but I postponed due to work and real life, and also smspower competition =)

Last thing I did was making sure it can play in mobile with good performance, but it still has some bugs.

that's great, Niloct! you should use my YM2413.js and add support for FM too.

Are you filling an AudioBuffer so as to avoid using a ScriptProcessorNode? That's interesting, it will cause less audio stuttering, but doesn't allow muting individual channels. I might use that idea though, for the simple version of the player.

Also, I've noticed a small issue, the first song from Shinobi has a strange delay when the solo instrument kicks in.

Good ear!

Yes, I started with a very slow implementation of SN76489 and then changed to a javascript version of Maxim's code.

You bet about your FM core!

ScriptProcessor is broken on mobile. I tried in iPad 2 and iPhone and it really doesn't work.

That's interesting. Does Flash work on those?

No.

And about muting, it's implemented in Maxim code with chip.Mute struct member.

Still have to find out why Shinobi vgm is behaving like that, it seems like it's because of the long wait before first note write. (I removed the base and rhythm).

Author	Message
vampirefrog Joined: 26 Apr 2014 Posts: 28	Creating the UI for a cool in-browser VGM player Posted: Mon Jul 06, 2015 7:08 pm Last edited by vampirefrog on Tue Jul 07, 2015 9:34 pm; edited 1 time in total
vampirefrog Joined: 26 Apr 2014 Posts: 28	Hey gang, I'd like to make a VGM player for smspower that has a specific UI, and that can be added to any of the Music pages, for example here. The playback code is already written and working fine, you can see a demo here. It supports both YM2413 and SN76489. And over here you can see one made with AS3 (Flash), with the working keyboards display. What I'd like is a specific SMS UI, so for example the seek cursor can be the snail from Wonder Boy, the seek bar can be the ground from Wonder Boy, and when you grab the snail, it curls up, using the sprite for when you kill it. Since the emulation code is all JS, it can do as much as we want, including drawing the notes on keyboards, like mmdsp or having a piano roll effect like nsfplay synthesia. We can display the intro length and the loop length and the fadeout length on the seek bar. The player should be able to be configured in several ways: Mute/unmute channels Set volume Set playback speed Number of loops Fade-out length Visualisation type: keyboards (mmdsp) or piano roll (synthesia) Shuffle / repeat / repeat one song After playlist ends a checkbox to go to a random music set, or one that you choose etc. etc. It will be able to display all of the VGM info, such as the GD3 tag info, the chip frequencies, the number of samples in the loop, total samples etc. So all the VGM header info and the GD3 info. I'm not very good with design, so I could use some help just getting a starting point mockup. It has to fit into the existing music pages, in the place of the playlist table. Later we can extend the player to support one-off VGMs, for simple embedding, like in the Homebrew list. As you can see, there are 9 + 4 keyboards, those are 9 YM2413 channels and 4 SN76489 channels. Perhaps the noise channel on the SN can be displayed differently, and we usually won't need to display the YM channels, only the SN channels, so normally it would be smaller. Anyway, I made a very poor mockup on this page. There is playback, but no seeking or volume controls, we can add those when we have a proper UI design, or at least a good starting point. Get creative and have fun!

vampirefrog Joined: 26 Apr 2014 Posts: 28	Posted: Tue Jul 07, 2015 8:36 am
vampirefrog Joined: 26 Apr 2014 Posts: 28	Just wanted to mention the in-browser VGM player that I've added to project2612 recently, thanks to wothke's effort. However, the player on project2612 is compiled with emscripten, so is a bit different than the player that we have planned here for smspower. Also, I estimate our player will be only about 100KB un-minified and un-gzipped.

vampirefrog Joined: 26 Apr 2014 Posts: 28	Posted: Wed Apr 06, 2016 10:07 am
vampirefrog Joined: 26 Apr 2014 Posts: 28	I've made it so now you can seek and mute channels. Next step is to improve the way it looks, a bit. I've also noticed some packs have the YM2413 clock set, but no YM2413 commands are used. I was thinking of generating warnings based on issues my vgm player finds, such as unused chips, strange clock speeds, and inaccurate sample counts. Also, I'm thinking of removing the keyboards, just to favor a simpler player that we can deploy, and we can add visual effects later on.

vampirefrog Joined: 26 Apr 2014 Posts: 28	Posted: Thu Apr 07, 2016 4:49 pm
vampirefrog Joined: 26 Apr 2014 Posts: 28	I've decided to make two versions of the player - a really basic one, just to get going, and later a more complex one, with all the features described above, and more. The simple one will just have play, prev, next, volume and seek. I'm thinking of making it appear only when WebAudio is available. Otherwise the pages look normal. The more complex one can go in playlist pages, such as http://www.smspower.org/Music/PuyoPuyo2-GG-Playlist

Niloct Joined: 25 Dec 2005 Posts: 607 Location: São Paulo - Brazil	Posted: Thu Apr 07, 2016 6:03 pm
	Hey vampirefrog, I've a thing in progress which works, basically: http://vgm1.impulseinformatica.com.br/ I have some ideas to finish it but I postponed due to work and real life, and also smspower competition =) Last thing I did was making sure it can play in mobile with good performance, but it still has some bugs.

vampirefrog Joined: 26 Apr 2014 Posts: 28	Posted: Thu Apr 07, 2016 7:22 pm
vampirefrog Joined: 26 Apr 2014 Posts: 28	that's great, Niloct! you should use my YM2413.js and add support for FM too. Are you filling an AudioBuffer so as to avoid using a ScriptProcessorNode? That's interesting, it will cause less audio stuttering, but doesn't allow muting individual channels. I might use that idea though, for the simple version of the player. Also, I've noticed a small issue, the first song from Shinobi has a strange delay when the solo instrument kicks in.

Niloct Joined: 25 Dec 2005 Posts: 607 Location: São Paulo - Brazil	Posted: Thu Apr 07, 2016 7:25 pm
	Good ear! Yes, I started with a very slow implementation of SN76489 and then changed to a javascript version of Maxim's code. You bet about your FM core!

Niloct Joined: 25 Dec 2005 Posts: 607 Location: São Paulo - Brazil	Posted: Thu Apr 07, 2016 7:27 pm
	ScriptProcessor is broken on mobile. I tried in iPad 2 and iPhone and it really doesn't work.

vampirefrog Joined: 26 Apr 2014 Posts: 28	Posted: Thu Apr 07, 2016 7:27 pm
vampirefrog Joined: 26 Apr 2014 Posts: 28	That's interesting. Does Flash work on those?

Niloct Joined: 25 Dec 2005 Posts: 607 Location: São Paulo - Brazil	Posted: Sat Apr 23, 2016 10:43 pm
	No. And about muting, it's implemented in Maxim code with chip.Mute struct member. Still have to find out why Shinobi vgm is behaving like that, it seems like it's because of the long wait before first note write. (I removed the base and rhythm).

Forums

View topic - Creating the UI for a cool in-browser VGM player