6

I am trying to use Tone.js to make music with javascript. I get the error message "tonetutorial.html:26 Uncaught TypeError: Tone.Player is not a constructor" whenever I try to make it work.

I have at the top of my HTML file. I am currently using Brackets to write and preview my code.

This is my javascript function

function sequencer() {
const kick= new Tone.Player("Cartoon_Boing.mp3").toMaster();

const kickInputs = document.querySelectorAll(".kick");
}
sequencer();

this is the HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.0.2/Tone.min.js"></script>
<script src=tonetutorial.js></script>
<body>
    <h1>Music Maker</h1>
    <div class="drums">
        <div class="kick">
            <input type="Checkbox">
        </div>
    </div>
</body>

When I try to run this, I am being told that "Tone.Player" is not a constructor. can I not use the web cdn in this case? do I have to download the .min to my desktop?

CharlieBakes
  • 83
  • 1
  • 1
  • 7
  • 3
    Can you please provide the HTML you're using to include these scripts? It may be possible you've either loaded your code before the Tone library, or your Tone CDN URL is incorrect. – IceMetalPunk Jul 15 '19 at 20:51
  • 1
    You can download to your local filesystem too, but including it's cdn, if you have internet access should work. Can you post a fiddle? And please, read this https://stackoverflow.com/help/minimal-reproducible-example – Marco Jul 15 '19 at 20:51
  • 1
    Try it: https://cdnjs.com/libraries/tone – SScotti Jul 15 '19 at 20:52
  • You should put your js code into the load function of document. – Marco Jul 15 '19 at 20:56
  • I've added the HTML and tried to create the minimal example - I do have internet access but it doesn't seem to work – CharlieBakes Jul 15 '19 at 20:57
  • 1
    sounds like it should not have `new` with that error message. – epascarello Jul 15 '19 at 20:59
  • @epascarello The official documentation uses `new`: https://tonejs.github.io/docs/r13/Player – Michael Kolber Jul 15 '19 at 21:02
  • If you are running this from the file system (i.e., if you look at the address bar and the URL is something like "file:///C:/index.html" or "C:\index.html") then trying to mix content from the internet with content from the file system is unlikely to work. You need to see the URL starting with "http://". You need to figure out how to run an HTTP server locally (or just download the file). – Heretic Monkey Jul 15 '19 at 21:09

2 Answers2

4

https://cdnjs.cloudflare.com/ajax/libs/tone/14.0.2/Tone.min.js does not include Player.

The releases page for the library shows that the latest released version is 13.4.9.

Possibly, 14.0.2 is buggy.

Using <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/13.4.9/Tone.min.js"></script> resolves the issue.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
1

It seems the version of Tone.js you are using is too new, and is still in development. The official Tone.js documentation for player shows r13 in the URL, and the last commit to the master branch on the GitHub repo was on January 10th, which coincides with the January 9th release on GitHub, which is the latest release. Furthermore, searching through the code you linked to does not seem to contain Player anywhere, and the link to download on the GitHub repo downloads version 13.4.9, which does contain Player.

Instead, consider using:

<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/13.4.9/Tone.min.js"></script>
Michael Kolber
  • 1,309
  • 1
  • 14
  • 23