JavaScript API issues

Question

JavaScript API issues

Navigation

#1 by (1 votes)

1

I'm developing an application that involves music, and for ease of development, I'm using the RetroJS API. But I can not use it. The following errors appear in the Console:

<html><head><scriptsrc="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>

api javascript

asked by anonymous 03.01.2018 / 12:12

1 answer

Is there any way to get what the user is listening to? Data content - R [duplicate]

score 1 · Accepted Answer

I just tested and checked several other bugs, let's take a look.

Module is not defined

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

As these other libs need module.js , it will not work.

Move this part <script src="vendor/module.js"></script> to the top (The first one in the list).

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

You should replace let player = new Player(); with

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

Is it over there? No. Your code needs more repairs.

After correcting the above errors, you will encounter errors of this type:

Can not 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 find the elements above, if it does not find, you will have a failure and can not proceed.

Hope you have more

Correcting all these errors above, you still have two other errors. This time with the music playing.

One of the errors is because you are trying to pass a string to the Player.load() method. This method only accepts json , so you should not use 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 should follow this pattern.

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

It may be good to review this code, because by following Google Chrome, it may become obsolete link

Helpful Links:

Retro Audio JS

Seeing working