1

Estou desenvolvendo uma aplicação que envolve música e, para facilitar o desenvolvimento, estou utilizando a API RetroJS. Porém, não estou conseguindo utilizá-la. Aparecem o seguintes erros no Console:

inserir a descrição da imagem aqui

<html>
<head>
    <script src="src/Chord.js"></script>
    <script src="src/Controls.js"></script>
    <script src="src/Events.js"></script>
    <script src="src/Instrument.js"></script>
    <script src="src/Note.js"></script>
    <script src="src/Player.js"></script>
    <script src="src/Song.js"></script>
    <script src="src/Track.js"></script>
    <script src="src/instruments/Oscillator.js"></script>
    <script src="vendor/modernizr.js"></script>
    <script src="vendor/module.js"></script>
    <script src="vendor/namespace.js"></script>
    <script src="vendor/sushi/extend.js"></script>
    <script>
        function play(){
            let player = new Player();

            var minhaSingelaCancao = JSON.stringify({
                title : "mi-mi-re-do",
                tempo : 60,
                time_signature : "4/4",
                score : [{
                    instrument : "oscillator-sine",
                    volume : 1.0,
                    sheet : "EEDCCDEFGGFEEDD".split('')
                }]
            });

            player.load(minhaSingelaCancao);
        }
    </script>
</head>
<body>
    <button onclick="play()">Play</button>
</body>
</html>

1 Resposta 1

0

Acabei de testar e verifiquei vários outros erros, vamos por parte.

  1. Module is not defined

Esse erro é porque você está carregando o script vendor/module.js depois do Chord.js, Controls.js, Events.js e etc.

Como essas outras libs precisam do module.js, não vai funcionar.

Mova esse trecho <script src="vendor/module.js"></script> para o topo (O primeiro da lista).

  1. Uncaught ReferenceError: Player is not defined at play (index.html:19) at HTMLButtonElement.onclick (index.html:37)

Você deve substituir let player = new Player(); por

var player = new Retro.Player(); ou var player = new App.Player();

Acabou por aí? Não. Seu código precisa de mais reparos.

Após corrigir os erros acima, você irá se deparar com erros desse tipo:

Cannot read property 'querySelector' of null

Por quê? Como corrigir?

Pois bem, para utilizar essa lib, você precisa seguir algumas regras, uma delas é definir exatamente o trecho abaixo em seu HTML.

<div data-player-controls style="display:none">
  <div data-song-controls>
    <span data-song-load></span>
  </div>

  <div class="playback-controls" data-playback-controls>
      <button type="button" class="bt play-bt" data-play>Play</button>
      <button type="button" class="bt pause-bt" data-pause>Pause</button>
      <button type="button" class="bt stop-bt" data-stop>Stop</button>
  </div>

  <div data-song-info>
    <span data-current-song></span>
  </div>
</div>

Isso é porque ao instanciar o objeto Player, ele tentará localizar os elementos acima, caso não encontre, você terá uma falha e não conseguir prosseguir.

Espera que tem mais

Corrigindo todos esses erros acima, você ainda terá dois outros erros. Dessa vez com a execução da música.

Um dos erros é porque você está tentando passar uma string para o método Player.load(). Esse método aceita apenas json, por isso você não deve utilizar JSON.stringify();

O segundo erro é porque as seguintes notas: ["E", "E", "D", "C, "C", "D", "E", "F", "G", "G", "F", "E", "E", "D", "D"] Mas se você dá uma olhada na documentação (ou no próprio código), você deve seguir esse padrão.

[ "C.4", "D.4", "E.4", "F.4", "G.4", "A.4", "B.4", "C5.4" ]

Talvez seja bom revisar esse código, pois seguindo o Google Chrome, ele poderá ficar obsoleto https://www.chromestatus.com/features/5287995770929152

Links Úteis:

Retro Audio JS

Ver funcionando

4
  • Sumiram todos os erros, exceto este: "Uncaught ReferenceError: Player is not defined at play (index.html:19) at HTMLButtonElement.onclick (index.html:37)"
    – user75204
    3/01/2018 às 11:19
  • Utilize new Retro.Player(); ao invés de new Player(); 3/01/2018 às 11:23
  • index.html:19 Uncaught ReferenceError: Retro is not defined at play (index.html:19) at HTMLButtonElement.onclick (index.html:37)
    – user75204
    3/01/2018 às 11:24
  • Editei minha resposta. Adicionei algumas informações + uma demo. 3/01/2018 às 12:11

Você deve fazer log-in para responder a esta pergunta.