I am trying to learn about p5 and have been going through the tutorials (https://p5js.org/reference/#/p5.SoundFile).
function preload() {
soundFormats('mp3', 'ogg');
mySound = loadSound('assets/cam.mp3');
}
function setup() {
mySound.setVolume(0.1);
mySound.play();
}
I have followed the documentation verbatim, except for the fact that I switched in my own test song. When I run this on my repl.it https://repl.it/#JacksonEnnis/Coloquial I get an error stating "ReferenceError: soundFormats is not defined". However, I know that this function IS defined, because it is from the documentation. I have googled the problem, but it does not seem like it is a common issue to experience.
If anyone understands why this is happening, please explain it to me so I may learn.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script language="javascript" type="text/javascript" src="path/to/p5.sound.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
<script src="script.js"></script>
</body>
</html>
Just to sum up the comments.
Here's the solution that works:
<!doctype HTML>
<html>
<head>
<html><head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/addons/p5.sound.js"></script>
</head>
<body>
<script>
function preload() {
soundFormats('ogg', 'mp3');
mySound = loadSound('https://ia802508.us.archive.org/5/items/testmp3testfile/mpthreetest.mp3');
}
function setup() {
mySound.setVolume(1);
// mySound.play();
mySound.loop();
}
</script>
</body>
</html>
as you can see: the p5.sound.js file has to be included as well. It has to be a valid path and it has to be loaded after the p5.js.
soundFormats is a function defined in p5.sound.js. And if this javascript file has not been loaded properly, an error message "soundFormats is not defined" comes up.
Related
I'm busy pumping out some web projects from the Odin Project. Anyway, I'd like to adhere to the software engineering process of taking small steps and testing them. Now, for instance, I'd like to see the output of document.querySelector("body"). It is my understanding that I should place the tag somewhere, I'm not too sure what the best place is. The StackOverflow posts on this topic are quite ambiguous. Here's my code:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Etch-A-Sketch</title>
<meta charset="UTF-8"/>
</head>
<body>
</body>
<script type="text/javascript" src="createDOM.js"></script>
</html>
createDOM.js:
const body = document.querySelector("body");
console.log(body);
Console:
<body>
<script type="text/javascript" src="createDOM.js"></script>
</body>
Me:
$ ????????
It is the way webengine play with source. Most ( and almost all ) webengine put everything into body that can be ( i.e following the standard ) because body is taken as subroot for DOM structure
Wrapp your script inside the body tag, at the end.
<!DOCTYPE html>
<html>
<head>
<title>Etch-A-Sketch</title>
<meta charset="UTF-8"/>
</head>
<body>
<script type="text/javascript" src="createDOM.js"</script>
</body>
</html>
I am new to programming. I am working on one my school assignment and I have two Jquery files that I am using. One was provided to us from the school. However I am keep getting an error Uncaught TypeError: $(...).moveTo is not a function. I have spent few hours on google but still have not manage to resolve this. Not sure what I am missing. Any suggestion ?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name='viewport'content='width=device-width, intial-scale=1.0 , user-scaleable=no'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" scr="./jquery-2.2.4.min.js"></script>
<script type="text/javascript" scr="js/introtoapps.min.js"></script>
<script>
$(document).ready(function(){
$("#balloon").moveTo(180);
});
</script>
as far as i know moveTo function moves a window's left and top edge to the specified coordinates which require two parameter and your window object
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<meta name='viewport'content='width=device-width, intial-scale=1.0 , user-scaleable=no'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" scr="./jquery-2.2.4.min.js"></script>
<script type="text/javascript" scr="js/introtoapps.min.js"></script>
<script>
$(document).ready(function(){
window.moveTo(180, 180);
});
</script>
so I'm trying to setup PapaParser to parse a CSV file onto arrays that I can later use with another script to make graphs. So far I just want to paste the strings from my arrays onto the blank div, so I can see what's going on. I am new to this and have no idea how to import javascript libraries, so I copied the files into my public_html folder. Now NetBeans seems to see them.
Long story short I'm stuck at the beginning, I get a reference of ReferenceError: Papa is not defined when I try to run my parser.
Any input or a link to a tutorial on how to do this would be greatly appreciated (tried googling, found nothing of use). I've added my code so far...
Papa.parse("TopPercentilesCSV.csv", {
complete: function(results) {
console.log("Finished:", results.data);
}
});
.displaypanel {
border: 1px solid black;
width:400px;
height:400px;
margin:auto;
}
<!DOCTYPE html>
<html>
<head>
<title>Parsing CSV test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="index.css"/>
<script type="text/javascript" src="index.js"></script>
<script src="PapaParse/papaparse.js"></script>
</head>
<body>
<div class="displaypanel">
</div>
</body>
</html>
Change your code to this:
<!DOCTYPE html>
<html>
<head>
<title>Parsing CSV test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="index.css"/>
<script src="PapaParse/papaparse.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<div class="displaypanel">
</div>
</body>
</html>
First you have to include the library, then you can call function defined inside
I am trying the following to write the contents of a local text file (version.txt) to the screen, but it isn't working.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script charset="utf-8" src = "jquery-1.10.1.min.js"></script>
<script charset="utf-8" src = "cordova-2.7.0.js"></script>
<script>
function test()
{
$.get("version.txt", function(data) {
document.write(data);
});
}
</script>
<body>
<button type="button" onclick="test()">Print version.txt</button>
</body>
</html>
Any idea what I'm doing wrong?
update: this works, I was just mistyping the name of the jquery file I was including.
You're missing a closing brace. The console will clearly tell you about invalid Javascript if you look.
You can't use document.write after the page has loaded. (Well you can, but you won't get the result you want.) Use jQuery append() instead.
I don't know wheater it is typo or not you are missing closing brace for function test
<script>
function test()
{
$.get("version.txt", function(data) {
document.write(data);
});
}
</script>
I'm encountering a problem where my body onload="constructor()" is not being run. It works fine for me in firefox but I don't understand why it's not working for me in chrome. Here's the code I'm working with, I made a separate file and deleted everything to the bare minium to try figure out what was going wrong:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Personality Font</title>
<link rel="stylesheet" type="text/css" href="p1.css" />
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript">
//<![CDATA[
function constructor(which)
{
console.log("IN CONSTRUCTOR"); //In Constructor
var text = document.createElement('p');
text.appendChild(document.createTextNode("BLAH"));
document.getElementsByTagName('body')[0].appendChild(text);
}
//]]>
</script>
</head>
<body onload = "constructor();">
<h1>Personal Fonts: Find the Typeface that Matches Your Personality</h1>
<form>
</form>
</body>
</html>
Chrome has a built-in function with the name constructor. Call the function something else.