Search code examples
javascripthtmllocalcdntone.js

How to use CDN in local javascript file

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?

Solution

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