Transferir como PDF, PPTX
![{
"title" : "Imperial March",
"tempo" : 120,
"time_signature" : "4/4",
"score" : [
{
"instrument" : "oscillator-square",
"volume" : 0.5,
"sheet" : [
"G.8D", "-.16", "G.8D", "-.16", "G.8D", "-.16", "Eb.8D", "Bb.16",
"G.8D", "-.16", "Eb.8D", "Bb.16", "G.4", "-.4"
]
}
]
}
Uma partitura, bem simplificada, tem o título, tempo, assinatura de tempo, e as notas. A
implementação em JSON que bolei ficou assim.](https://image.slidesharecdn.com/lightningtalk-retrojs-130914164857-phpapp02/85/RetroJS-Escrevendo-musicas-da-era-8-bits-com-JavaScript-e-Web-Audio-API-24-320.jpg)
![[
"G.8D", "-.16", "G.8D", "-.16", "G.8D", "-.16", "Eb.8D", "Bb.16",
"G.8D", "-.16", "Eb.8D", "Bb.16", "G.4", "-.4"
]
Uma música é um array de notas. Mas como é a sintaxe dessas notas?](https://image.slidesharecdn.com/lightningtalk-retrojs-130914164857-phpapp02/85/RetroJS-Escrevendo-musicas-da-era-8-bits-com-JavaScript-e-Web-Audio-API-25-320.jpg)
![parsedTrack["0"] = new Note("C.4");
parsedTrack["16"] = new Note("D.4");
parsedTrack["32"] = new Note("E.4");
parsedTrack["64"] = new Note("F.4");
Tracks são hashes que contêm como índice o ciclo, e a nota que deve ser tocada nesse ciclo.](https://image.slidesharecdn.com/lightningtalk-retrojs-130914164857-phpapp02/85/RetroJS-Escrevendo-musicas-da-era-8-bits-com-JavaScript-e-Web-Audio-API-41-320.jpg)
![parsedTrack["0"] = new Note("C.4");
parsedTrack["16"] = new Note("D.4");
parsedTrack["32"] = new Note("E.4");
parsedTrack["64"] = new Note("F.4");
var cycleDuration = 62.5
, currentCycle = 0
;
function renderCycle () {
parsedTrack[currentCycle].play()
currentCycle = currentCycle + 1;
setTimeout(renderCycle, cycleDuration);
};
Uma loop incrementa os ciclos e checa se há notas a serem tocadas ali.](https://image.slidesharecdn.com/lightningtalk-retrojs-130914164857-phpapp02/85/RetroJS-Escrevendo-musicas-da-era-8-bits-com-JavaScript-e-Web-Audio-API-42-320.jpg)
![parsedTrack0["0"] = new Note("C.4");
parsedTrack0["16"] = new Note("D.4");
parsedTrack0["32"] = new Note("E.4");
parsedTrack0["64"] = new Note("F.4");
parsedTrack1["0"] = new Note("G.4");
parsedTrack1["16"] = new Note("A.4");
tracks[0] = parsedTrack0;
tracks[1] = parsedTrack1;
var cycleDuration = 62.5
, currentCycle = 0
;
function renderCycle () {
for (var i = 0, l = tracks.length; i < l; i++) {
tracks[i][currentCycle].play();
}
currentCycle = currentCycle + 1;
setTimeout(renderCycle, cycleDuration);
};
Se o parâmetro de indexação de uma nota na música é o mesmo entre todos os tracks, é fácil
fazer músicas com múltiplos tracks.](https://image.slidesharecdn.com/lightningtalk-retrojs-130914164857-phpapp02/85/RetroJS-Escrevendo-musicas-da-era-8-bits-com-JavaScript-e-Web-Audio-API-45-320.jpg)
Carregado porEduardo Shiota Yasuda
RetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio API
O documento descreve o desenvolvimento de um projeto chamado Retro Audio JS, que permite tocar músicas retro usando apenas JavaScript. O autor criou uma notação musical simplificada em JSON e um loop que interpreta as notas a cada ciclo, permitindo reproduzir canções completas como o tema do Super Mario Bros. A implementação enfrentou desafios como manter o ritmo e melhorar o desempenho, mas o autor conseguiu reproduzir com sucesso a música usando apenas o navegador.
RetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio API
- 1. RETROJS Party like it's1983 @shiota 2013
- 2.
- 3.
- 4. Tudo começou napalestra do @almirfilho no OlhóSEO em Floripa sobre Web Audio API. O @fnando falou "Cara, dá pra fazer o JavaScript tocar o tema do Mario, imagina que foda?". Challenge accepted.
- 5.
- 6. // Vendor prefixed varcontext = new webkitAudioContext();
- 7.
- 8. var oscillator =context.createOscillator(); oscillator.connect(context.destination);
- 9.
- 10.
- 12. about me Estudei pianodos 8 aos 15 anos. Sou apaixonado por música clássica, e gosto de ler partituras. Nada como juntar um hobby antigo com uma paixão. =)
- 13. Voltando ao assunto:challenge accepted, né? =)
- 14.
- 15. & ? 4 4 4 4 Piano Allegro q»™ºº œ œ# œ œ ‰ J œ œ‰ œ œ œ œ ‰ œ œ ‰ J œ ‰ œ œ ‰ J œ œœ ‰ Œ j œ ‰ Œ Ó J œ ‰ Œ & ? .. .. A3 j œ œ ‰ ‰ j œ œ Œ j œ œ ‰ J œ ‰ ‰ J œ Œ j œ ‰ ‰ œ œ ‰ œ œ ‰ œ œ b b œ œ ‰ ‰ œ ‰ œ ‰ œb œ ‰ œ œ œ œ œ œ J œ œ ‰ œ œ œ œ 3 œ œ œ J œ ‰ œ œ 3 ‰ œ œ ‰ œ œ œ œ œ œ Œ ‰ œ ‰ œ œ œ Œ & ? 7 j œ œ ‰ ‰ j œ œ Œ j œ œ ‰ J œ ‰ ‰ J œ Œ j œ ‰ ‰ œ œ ‰ œ œ ‰ œ œ b b œ œ ‰ ‰ œ ‰ œ ‰ œb œ ‰ œ œ œ œ œ œ J œ œ ‰ œ œ œ œ 3 œ œ œ J œ ‰ œ œ 3 ‰ œ œ ‰ œ œ œ œ œ œ Œ ‰ œ ‰ œ œ œ Œ & ? B11 Œ œœ œœ## œœnn œœ# ‰ J œœ j œ ‰ ‰ J œ Œ J œ ‰ ‰ œœ# œœ œœn ‰ œ œ œ œ œ œ J œ ‰ ‰ J œ œ ‰ œ ‰ Œ œœ œœ## œœnn œœ# ‰ J œœ j œ ‰ ‰ J œ Œ œ œ ‰ œœœ ‰ œœœ J œœœ ‰ Œ Ó Œ J œ ‰ Overworld Theme From Super Mario Bros. Koji Kondo Transcribed by BLUESCD http://www.gamemusicthemes.com/
- 16.
- 17. = 60 oscillator.frequency.value =391; oscillator.start(0); oscillator.stop(context.currentTime + 1);
- 18. = 60 setTimeout(function (){ oscillator.frequency.value = 391; oscillator.start(0); oscillator.stop(context.currentTime + 1); }, 1000);
- 19. = 60 setTimeout(function (){ oscillator.frequency.value = 391; oscillator.start(0); oscillator.stop(context.currentTime + 1); }, 2000);
- 20. problemas manter track dotempo oscillator tem vida curta impraticável de escrever
- 21. solução criar notação musical criarloop de execução criar estrutura para lidar com tracks e notas
- 22.
- 23. & ? 4 4 4 4 Piano Allegro q»™ºº œ œ# œ œ ‰ J œ œ‰ œ œ œ œ ‰ œ œ ‰ J œ ‰ œ œ ‰ J œ œœ ‰ Œ j œ ‰ Œ Ó J œ ‰ Œ & ? .. .. A3 j œ œ ‰ ‰ j œ œ Œ j œ œ ‰ J œ ‰ ‰ J œ Œ j œ ‰ ‰ œ œ ‰ œ œ ‰ œ œ b b œ œ ‰ ‰ œ ‰ œ ‰ œb œ ‰ œ œ œ œ œ œ J œ œ ‰ œ œ œ œ 3 œ œ œ J œ ‰ œ œ 3 ‰ œ œ ‰ œ œ œ œ œ œ Œ ‰ œ ‰ œ œ œ Œ Overworld Theme From Super Mario Bros. Koji Kondo Transcribed by BLUESCD http://www.gamemusicthemes.com/
- 24. { "title" : "ImperialMarch", "tempo" : 120, "time_signature" : "4/4", "score" : [ { "instrument" : "oscillator-square", "volume" : 0.5, "sheet" : [ "G.8D", "-.16", "G.8D", "-.16", "G.8D", "-.16", "Eb.8D", "Bb.16", "G.8D", "-.16", "Eb.8D", "Bb.16", "G.4", "-.4" ] } ] } Uma partitura, bem simplificada, tem o título, tempo, assinatura de tempo, e as notas. A implementação em JSON que bolei ficou assim.
- 25. [ "G.8D", "-.16", "G.8D","-.16", "G.8D", "-.16", "Eb.8D", "Bb.16", "G.8D", "-.16", "Eb.8D", "Bb.16", "G.4", "-.4" ] Uma música é um array de notas. Mas como é a sintaxe dessas notas?
- 26. "G.4" frequência (391) duração (1/4) Umafunção `getFrequency` interpreta a nota e retorna a frequência, dada uma fórmula matemática.
- 27.
- 28.
- 29. "-.4" duração (1/4) Pausassão representadas com um "-".
- 30.
- 31. conceito dividir a músicanas menores marcações possíveis, e usar como marcação para iniciar as notas
- 32. & ? 4 4 4 4 Piano Allegro q»™ºº œ œ# œ œ ‰ J œ œ‰ œ œ œ œ ‰ œ œ ‰ J œ ‰ œ œ ‰ J œ œœ ‰ Œ j œ ‰ Œ Ó J œ ‰ Œ & ? .. .. A3 j œ œ ‰ ‰ j œ œ Œ j œ œ ‰ J œ ‰ ‰ J œ Œ j œ ‰ ‰ œ œ ‰ œ œ ‰ œ œ b b œ œ ‰ ‰ œ ‰ œ ‰ œb œ ‰ œ œ œ œ œ œ J œ œ ‰ œ œ œ œ 3 œ œ œ J œ ‰ œ œ 3 ‰ œ œ ‰ œ œ œ œ œ œ Œ ‰ œ ‰ œ œ œ Œ & ? 7 j œ œ ‰ ‰ j œ œ Œ j œ œ ‰ J œ ‰ ‰ J œ Œ j œ ‰ ‰ œ œ ‰ œ œ ‰ œ œ b b œ œ ‰ ‰ œ ‰ œ ‰ œb œ ‰ œ œ œ œ œ œ J œ œ ‰ œ œ œ œ 3 œ œ œ J œ ‰ œ œ 3 ‰ œ œ ‰ œ œ œ œ œ œ Œ ‰ œ ‰ œ œ œ Œ & ? B11 Œ œœ œœ## œœnn œœ# ‰ J œœ j œ ‰ ‰ J œ Œ J œ ‰ ‰ œœ# œœ œœn ‰ œ œ œ œ œ œ J œ ‰ ‰ J œ œ ‰ œ ‰ Œ œœ œœ## œœnn œœ# ‰ J œœ j œ ‰ ‰ J œ Œ œ œ ‰ œœœ ‰ œœœ J œœœ ‰ Œ Ó Œ J œ ‰ Overworld Theme From Super Mario Bros. Koji Kondo Transcribed by BLUESCD http://www.gamemusicthemes.com/
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40. 1000ms = 16cycles de 62.5ms Se uma música tem 60 bpm, uma semínima (uma "batida") tem um segundo. Uma semínima tem 16 semifusas, então tem 16 ciclos. Cada ciclo, portanto, tem 1000/16 = 62.5ms
- 41. parsedTrack["0"] = newNote("C.4"); parsedTrack["16"] = new Note("D.4"); parsedTrack["32"] = new Note("E.4"); parsedTrack["64"] = new Note("F.4"); Tracks são hashes que contêm como índice o ciclo, e a nota que deve ser tocada nesse ciclo.
- 42. parsedTrack["0"] = newNote("C.4"); parsedTrack["16"] = new Note("D.4"); parsedTrack["32"] = new Note("E.4"); parsedTrack["64"] = new Note("F.4"); var cycleDuration = 62.5 , currentCycle = 0 ; function renderCycle () { parsedTrack[currentCycle].play() currentCycle = currentCycle + 1; setTimeout(renderCycle, cycleDuration); }; Uma loop incrementa os ciclos e checa se há notas a serem tocadas ali.
- 44.
- 45. parsedTrack0["0"] = newNote("C.4"); parsedTrack0["16"] = new Note("D.4"); parsedTrack0["32"] = new Note("E.4"); parsedTrack0["64"] = new Note("F.4"); parsedTrack1["0"] = new Note("G.4"); parsedTrack1["16"] = new Note("A.4"); tracks[0] = parsedTrack0; tracks[1] = parsedTrack1; var cycleDuration = 62.5 , currentCycle = 0 ; function renderCycle () { for (var i = 0, l = tracks.length; i < l; i++) { tracks[i][currentCycle].play(); } currentCycle = currentCycle + 1; setTimeout(renderCycle, cycleDuration); }; Se o parâmetro de indexação de uma nota na música é o mesmo entre todos os tracks, é fácil fazer músicas com múltiplos tracks.
- 47. dificuldades e adaptações nocaminho
- 48. oscillator tem vidacurta cada nota é uma nova instância
- 49. quartifusas (1/128) performance ficoubaixa Com múltiplos tracks, executar ciclos tomando uma nota quartifusa (1/128) de duração como base ficou muito pesado. Tive que voltar para uma semifusa (1/64).
- 50. notações não planejadas notaspontuadas, tercinas, acordes
- 51. estrutura adaptável novos instrumentos,controles modificáveis
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58. Mas e omario?
- 59. E nessa hora,foi tocado o tema do Mario completo, apenas com JavaScript. Achievement unlocked. ;D
- 60.