How to use CDN in local javascript file

javascript html local cdn tone.js
CharlieBakes picture CharlieBakes · Jul 15, 2019 · Viewed 8.7k times · Source

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?

Answer

Quentin picture Quentin · Jul 15, 2019

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.

Related questions

How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More
How can I change an element's class with JavaScript?

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?

Read More
Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

The following are two methods of building a link that has the sole purpose of running JavaScript code. Which is better, in terms of functionality, page load speed, validation purposes, etc.? or function myJsFunc() { alert("myJsFunc"); } <a href="javascript:…

Read More