Problems with Javascript API

Question

Problems with Javascript API

Asked 6 years, 9 months ago

Viewed 569 times

1

I am developing an application that involves music and, to facilitate development, I am using the API Retrojs. However, I am unable to use it. The following errors appear in the Console:

<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 answer

Browser other questions tagged javascript api

You are not signed in. Login or sign up in order to post.

by Valdeir Psr • **10,804** points · Answer 1 · 2018-01-03T11:16:35+00:00

I just tested and checked several other errors, let’s go by part.

Module is not defined

This error is because you are loading the script vendor/module.js after the Chord.js, Controls.js, Events.js and etc.

How these other libs need the module.js, won’t work.

Move that stretch <script src="vendor/module.js"></script> to the top (The first on the list).

Uncaught Referenceerror: Player is not defined at play (index.html:19) at Htmlbuttonelement.onclick (index.html:37)

You must replace let player = new Player(); for

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

Is that it? No. Your code needs further repair.

After fixing the above errors, you will come across such errors:

Cannot read Property 'querySelector' of null

Why? How to correct?

Well, to use this lib, you need to follow some rules, one of them is to define exactly the snippet below in your 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>

This is because when instantiating the object Player, it will try to locate the above elements, if it does not find, you will have a failure and cannot proceed.

Hope there’s more

Fixing all these above errors, you will still have two other mistakes. This time with the song running.

One of the errors is because you are trying to pass a string to the method Player.load(). This method accepts only json, that’s why you should not utilise JSON.stringify();

The second error is because the following notes: ["E", "E", "D", "C, "C", "D", "E", "F", "G", "G", "F", "E", "E", "D", "D"] But if you take a look at the documentation (or the code itself), you must follow this pattern.

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

You might want to review this code, because by following Google Chrome, it might be obsolete https://www.chromestatus.com/features/5287995770929152

Links Úteis:

Retro Audio JS

See working