# Karaoke

**URL:** https://forum.makecode.com/t/karaoke/22038
**Category:** Arcade
**Tags:** extension, music
**Created:** [August 24, 2023, 8:07pm UTC](https://forum.makecode.com/t/karaoke/22038 "2023-08-24T20:07:27Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![AqeeAqee](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/aqeeaqee/32/5424_2.png) [@AqeeAqee](https://forum.makecode.com/u/AqeeAqee)
#### Post date: [August 24, 2023, 8:07pm UTC](https://forum.makecode.com/t/karaoke/22038/1 "2023-08-24T20:07:27Z")

</div>

> **[Karaoke v.1](https://arcade.makecode.com/S18408-32820-19042-88868)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

Hi, all!  
This is a Karaoke music app, with some demo songs. To practice singing skill, instrument performence skill, or just sing & play for fun.

- Song played with build-in sequencer(by now). Faster/Slower BPM, jump between sentences while playing. And pitch tune(raise/fall), or adjust note(beats) width while pausing.

- Lyrics of songs are in various language, to show how deal with them, include English, Chinese, Japanese(Kana and Roma phonetic notation)

- For minimize job of inputing these songs, I seperated them in imduplicate sections, and create in build-in song editor. Then composited sections together with my custom SongEditor, and the SongBuider, which is a convenient wrapper of my SongEditor. They could join songs, repeat section, and harmony track, merge tracks, and etc.

- Of couse, you can also input notes of a whole song into one Song.

- Or use @UnsignedArduino 's [midi convert tool](https://forum.makecode.com/t/new-song-format/17763/11) to get your song. But be aware keeping a track for coresponding with lyric words (first melody track by default). One note to one word, use “-” for breaking words, and " " for words seperator in English, see demo codes for details.

My target is make a tool to make favorite songs into Karaoke easily, and play with it. See codes to learn how to. (in JS, no blocks yet, sorry.) Ask me for any question about it.

**Key control:**

```
            A: Pause/resume
            B: Restart
            ↕: Adjust BPM/Tempo
            → jump to next sentence
            ← jump to beginning of current sentence
            ←← previous sentence

            when pausing:
            ↕ Pitch(raise/fall) tune
            ↔ Wider/narrower width of notes

```

As usual, all suggestion or bug report are welcome, and appreciated!  
Have fun!

---

<div class="post-metadata">

### Author: ![UnsignedArduino](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/unsignedarduino/32/592_2.png) [@UnsignedArduino](https://forum.makecode.com/u/UnsignedArduino)
#### Post date: [August 25, 2023, 3:00am UTC](https://forum.makecode.com/t/karaoke/22038/2 "2023-08-25T03:00:13Z")

</div>

This is super cool! I always wanted to make something similar like this!

~~Now we have to put videos in the background like those rhythm games 🤣~~

---

<div class="post-metadata">

### Author: ![Sarge](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sarge/32/19590_2.png) [@Sarge](https://forum.makecode.com/u/Sarge)
#### Post date: [August 25, 2023, 4:38pm UTC](https://forum.makecode.com/t/karaoke/22038/3 "2023-08-25T16:38:17Z")

</div>

It really would be great if I knew how to read Japanese, huh 😂

---

<div class="post-metadata">

### Author: ![Luke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/luke/32/32519_2.png) [@Luke](https://forum.makecode.com/u/Luke)
#### Post date: [August 25, 2023, 5:08pm UTC](https://forum.makecode.com/t/karaoke/22038/4 "2023-08-25T17:08:23Z")

</div>

> [@Sarge](#):
>
> Japanese

_angry chinese noises_

---

<div class="post-metadata">

### Author: ![Sarge](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sarge/32/19590_2.png) [@Sarge](https://forum.makecode.com/u/Sarge)
#### Post date: [August 25, 2023, 10:27pm UTC](https://forum.makecode.com/t/karaoke/22038/5 "2023-08-25T22:27:03Z")

</div>

I was referring to the Bad apple lyrics

---

<div class="post-metadata">

### Author: ![AqeeAqee](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/aqeeaqee/32/5424_2.png) [@AqeeAqee](https://forum.makecode.com/u/AqeeAqee)
#### Post date: [August 25, 2023, 10:33pm UTC](https://forum.makecode.com/t/karaoke/22038/6 "2023-08-25T22:33:34Z")

</div>

> [@Sarge](#):
>
> It really would be great if I knew how to read Japanese, huh 😂

That’s why I need and make Roma phonetic notation edition, LOL

---

<div class="post-metadata">

### Author: ![AqeeAqee](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/aqeeaqee/32/5424_2.png) [@AqeeAqee](https://forum.makecode.com/u/AqeeAqee)
#### Post date: [August 25, 2023, 10:35pm UTC](https://forum.makecode.com/t/karaoke/22038/7 "2023-08-25T22:35:19Z")

</div>

> [@UnsignedArduino](#):
>
> Now we have to put videos in the background like those rhythm games 🤣

You mean this ? 😂

> **[Bad Apple MV](https://arcade.makecode.com/S94792-26566-74141-09609)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

Or link on my github: [https://aqeeaqee.github.io/bad-apple-mv/](https://aqeeaqee.github.io/bad-apple-mv/)

---

<div class="post-metadata">

### Author: ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)
#### Post date: [August 25, 2023, 10:35pm UTC](https://forum.makecode.com/t/karaoke/22038/8 "2023-08-25T22:35:52Z")

</div>

…i guess this was inevitable

---

<div class="post-metadata">

### Author: ![Luke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/luke/32/32519_2.png) [@Luke](https://forum.makecode.com/u/Luke)
#### Post date: [August 25, 2023, 11:09pm UTC](https://forum.makecode.com/t/karaoke/22038/9 "2023-08-25T23:09:33Z")

</div>

Sorry didn’t realise lol

---

<div class="post-metadata">

### Author: ![\_jupiter](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/_jupiter/32/28012_2.png) [@\_jupiter](https://forum.makecode.com/u/_jupiter)
#### Post date: [August 26, 2023, 5:32am UTC](https://forum.makecode.com/t/karaoke/22038/10 "2023-08-26T05:32:57Z")

</div>

Almost everything comes and goes even if it’s impossible  
unless it’s like, super impossible then it’s impossible. -Some random kid after drinking expired milk.

---

<div class="post-metadata">

### Author: ![Sarge](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sarge/32/19590_2.png) [@Sarge](https://forum.makecode.com/u/Sarge)
#### Post date: [August 28, 2023, 4:17pm UTC](https://forum.makecode.com/t/karaoke/22038/11 "2023-08-28T16:17:16Z")

</div>

You… beat me to it. Props to you, this is awesome

---

<div class="post-metadata">

### Author: ![Sarge](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sarge/32/19590_2.png) [@Sarge](https://forum.makecode.com/u/Sarge)
#### Post date: [August 28, 2023, 4:17pm UTC](https://forum.makecode.com/t/karaoke/22038/12 "2023-08-28T16:17:18Z")

</div>

Usually people have digestive issues, not philosophical ponders after drinking expired milk 🤔

---

<div class="post-metadata">

### Author: ![BlastBoxGames](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/blastboxgames/32/11727_2.png) [@BlastBoxGames](https://forum.makecode.com/u/BlastBoxGames)
#### Post date: [August 28, 2023, 4:17pm UTC](https://forum.makecode.com/t/karaoke/22038/13 "2023-08-28T16:17:21Z")

</div>

Can you add Never Gonna Give you up as one of the songs

---

<div class="post-metadata">

### Author: ![AqeeAqee](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/aqeeaqee/32/5424_2.png) [@AqeeAqee](https://forum.makecode.com/u/AqeeAqee)
#### Post date: [August 28, 2023, 8:58pm UTC](https://forum.makecode.com/t/karaoke/22038/14 "2023-08-28T20:58:51Z")

</div>

It’s no difficult to do, infact.  
First, copy codes from one of English demo songs, then input music score with buildin music editor. And copy/paste the lyric string, add “-” for break word, add “–” for word span multi notes.  
It should be playable.  
I will help you on following things, if you have any trouble.  
Good luck! 😉

---

<div class="post-metadata">

### Author: ![AqeeAqee](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/aqeeaqee/32/5424_2.png) [@AqeeAqee](https://forum.makecode.com/u/AqeeAqee)
#### Post date: [August 28, 2023, 9:00pm UTC](https://forum.makecode.com/t/karaoke/22038/15 "2023-08-28T21:00:11Z")

</div>

Thanks, and glad to hear you like it!  
Wait for your sharing with your favorate song. 🤩

---

<div class="post-metadata">

### Author: ![\_jupiter](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/_jupiter/32/28012_2.png) [@\_jupiter](https://forum.makecode.com/u/_jupiter)
#### Post date: [August 28, 2023, 11:09pm UTC](https://forum.makecode.com/t/karaoke/22038/16 "2023-08-28T23:09:15Z")

</div>

this was goat milk

---

<div class="post-metadata">

### Author: ![Vegz78](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/vegz78/32/1201_2.png) [@Vegz78](https://forum.makecode.com/u/Vegz78)
#### Post date: [October 19, 2023, 6:02pm UTC](https://forum.makecode.com/t/karaoke/22038/17 "2023-10-19T18:02:14Z")

</div>

How did you do this demo, @AqeeAqee?

I (believe I) understand that you run both movie frames/clips and song segments in two different loops at the end of the program. But how did you produce this sequence of images/movie clips?

---

<div class="post-metadata">

### Author: ![AqeeAqee](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/aqeeaqee/32/5424_2.png) [@AqeeAqee](https://forum.makecode.com/u/AqeeAqee)
#### Post date: [October 19, 2023, 9:30pm UTC](https://forum.makecode.com/t/karaoke/22038/18 "2023-10-19T21:30:33Z")

</div>

> [@Vegz78](#):
>
> run both movie frames/clips and song segments in two different loops at the end of the program.

Actually, to sure they are sync up always, there’s only one “loop”, the song. And on each time song tick changed, I depressed the corresponding frame, which computed from curTick, and show it out.

> [@Vegz78](#):
>
> how did you produce this sequence of images/movie clips?

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/6/692e1dcd408d514b5ee685228818640c12067108.png)  
I got frame images from web, 2600+ jpg images, 120x120 pixels each, for about 200 sec at 12fps. Totally 7MB+, too big to be write into an arcade project(though the jpg format have been in compressed already). I had to design a algorithm to compressed all of them especially. Luckily, I got it at last. A python compress algorithm packed them into less than 613KBytes . And the uncompress algorithm is just in the Acrade prj( see function renderFrame(index: number) ). Both are simple&fast enough.  
I am glad to share or describe them more detail if you or anyone are interesting.

---

<div class="post-metadata">

### Author: ![Vegz78](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/vegz78/32/1201_2.png) [@Vegz78](https://forum.makecode.com/u/Vegz78)
#### Post date: [October 19, 2023, 11:47pm UTC](https://forum.makecode.com/t/karaoke/22038/19 "2023-10-19T23:47:19Z")

</div>

Very cool! Thanks for explaining!

Speaking of demos, I don’t know much about their inner workings, but I have picked up that compression is a big part of the “bag of tricks” to get so much out of so small executables, not only that all the graphics and music are “programmed algorithmically”, so to speak.

Let’s get back to more detail if we ever get started for serious with a demo one day, at least for my sake. Right now there are so many interesting ideas and pieces presented already that I want to study closer. But to really raise some eyebrows, I am pretty sure that we will need your compression and decompression algorithm… 😉

---

<div class="post-metadata">

### Author: ![Kiwiphoenix364](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/kiwiphoenix364/32/14368_2.png) [@Kiwiphoenix364](https://forum.makecode.com/u/Kiwiphoenix364)
#### Post date: [March 27, 2024, 10:42pm UTC](https://forum.makecode.com/t/karaoke/22038/20 "2024-03-27T22:42:26Z")

</div>

Well, turns out you beat me to it. I recently made one entirely separately with @UnsignedArduino 's converters (took like 5 hours bc it’s so big) but I think it turned out cool. Music isn’t the best because it’s just a converted midi. Both music and the vid (gif) weirdly enough start a bit into the song but it seems like it turned out ok.

> **[bad-apple-arcade-for-the-memes](https://kiwiphoenix364.github.io/bad-apple-arcade-for-the-memes/)**
>
> A MakeCode project

It looks pretty smooth though Imo.

Btw this is just for the meme that this runs on anything, never played the games or anything.

[Next page](https://forum.makecode.com/t/karaoke/22038.md?page=2)
