Hello: I have a questions regarding my implementation of the visualization of audio (songs):
Currently, the HTML file and CSS file display what I want (a black box with a blue/cyan box underneath, as well as the audio.controls displaying), and the audio plays as it should. However, the script.js JavaScript files do not work to visualize the audio that is playing. Is this an issue with the linking of the JavaScript file, my use of the Web Audio API, or something else? Here is my code:
HTML - index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<link rel="stylesheet" type="text/css" href="./style.css">
<script type="text/javascript" src="./script.js"></script>
<title>Audio Visualizer</title>
</head>
<body>
<div id="mp3_player">
<div id="audio_box"></div>
<canvas id="analyser_render"></canvas>
</div>
</body>
</html>
CSS style.css
#mp3_player {
width: 500px;
height: 60px;
background: #000;
padding: 5px;
margin: 50px auto;
}
<code>#mp3_player > div > audio{
width: 500px;
background: #000;
float: left;
}
<code>#mp3_player > canvas{
width: 500px;
height: 30px;
background: #002D3C;
float: left;
}
JavaScript script.js
var audio = new Audio();
audio.src = 'gypsyheart.mp3';
audio.controls = true;
audio.loop = true;
audio.autoplay = false;<code>
var canvas, ctx, source, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
window.addEventListener("load", initMp3Player, false);
function initMp3Player(){
document.getElementById('audio_box').appendChild(audio);
context = new AudioContext();
analyser = context.CreateAnalyser();
canvas= document.getElementById('analyser_render');
ctx = canvas.getContext('2d');
source = context.createMediaElementSource(audio);
source.connect(context.destination);
frameLooper();
}
function frameLooper(){
window.requestAnimationFrame(frameLooper);
fbc_array = new Uint8Array(analyser.frequencyBinCount);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#00CCFF';
bars = 100;
for (var i = 0; i < bars; i++) {
bar_x = i*3;
bar_height = -(fbc_array[i] / 2);
bar_width = 2
ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);
}
}
FILE TREE
_folder includes (with no sub-folders):_
gypsyheart.mp3
index.html
style.css
script.js
Thank you for helping me out. All comments and suggestions are appreciated. If you have a different idea on how to approach this problem of visualizing (simply) music, I'd love to hear it, and am open to different methods of solving this problem! Apologies for any formatting errors here (first time using Stack Overflow)!
-Quin
Related
I would like to create a curved side bar for my dashboard panel. I've tried 2 ways:
create a svg and path: that result was not good at all.
create with js: the result was good but it was rasterized :|
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Quadratic Bézier curve
ctx.beginPath();
ctx.moveTo(280, 0);
ctx.quadraticCurveTo(240, 90, 270, 150);
ctx.lineTo(320, 320);
ctx.lineTo(320, 0);
ctx.fillStyle = "#0984e3";
ctx.fill();
//
const hes = document.getElementById('hesam');
const ctxx = canvas.getContext('2d');
// Quadratic Bézier curve
ctxx.beginPath();
ctxx.moveTo(281, 0);
ctxx.quadraticCurveTo(240, 90, 280, 150);
ctxx.lineTo(320, 320);
ctxx.lineTo(320, 0);
ctxx.fillStyle = "#74b9ff";
ctxx.fill();
#canvas {
width: 100%;
height: 100%;
position: absolute;
float: right;
}
#hesam {
width: 100%;
height: 100%;
position: absolute;
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
</head>
<body>
<canvas id="canvas"></canvas>
<canvas id="hesam"></canvas>
</body>
</html>
https://codepen.io/hessamr/pen/vYLzePX
How can I have this result with vectorized and have quality to use bg of a side bar.
Hey guy's I'm trying to make a snake game in JS. Right now I'm making the function that will determine the direction of the snake, but at the moment I just want to log the keycode of any given key to the console, but it comes up as undefined? Why is this? I have the keycode stored into a variable before I log it? thanks for the help:)
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
//set canvas dimension equal to css dimension
canvas.width = 750;
canvas.height = 500;
//create stroke
ctx.strokeStyle = 'limegreen';
ctx.strokeRect(375, 250, 15, 15);
//create square
ctx.fillStyle = 'limegreen';
ctx.fillRect(375, 250, 15, 15);
//read user's direction
document.addEventListener('keydown', changeDirection);
function changeDirection(e) {
let code = e.keycode;
console.log(code);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snake Game</title>
<style>
body {
background-color: #333;
}
canvas {
background-color: #4d4d4d;
margin: auto;
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 750px;
height: 500px;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>
Try e.keyCode instead of e.keycode
Hi i am trying to practice HTML 5 canvas. I just developed the code to make a triangle in a canvas. I am getting the canvas element using javascript and trying to draw a triangle in it. I don't know whats going wrong my javascript file is not getting linked or grabbing the canvas.
Html file code:
<!doctype html>
<html lang="en">
<head>
<meta charset= "UTF-8">
<style>
#canvas {
width: 400px;
height: 200px;
border: 1px solid red;
}
</style>
<script src="canvas.js"></script>
</head>
<body>
<canvas id="tcanvas">
</canvas>
</body>
</html>
Javascript code to draw in the canvas:
window.onload=init;
function draw() {
var canvas = document.getElementById('tcanvas');
var context=canvas.getContext("2d");
canvas.fillstyle="#0000FF";
context.lineWidth=3;
context.beginPath();
context.moveTo(50,100);
context.lineTo(150,100);
context.lineTo(100,50);
context.lineTo(50,100);
context.fill();
context.closePath();
}
draw();
init is undefined which means that your draw function is never invoked.
Check working example below which invokes draw on window.onload.
function draw() {
let canvas = document.getElementById('tcanvas');
let context = canvas.getContext("2d");
canvas.fillstyle = "#0000FF";
context.lineWidth = 3;
context.beginPath();
context.moveTo(50, 100);
context.lineTo(150, 100);
context.lineTo(100, 50);
context.lineTo(50, 100);
context.fill();
context.closePath();
}
window.onload = draw;
#canvas {
width: 400px;
height: 200px;
border: 1px solid red;
}
<canvas id="tcanvas"></canvas>
It does, you just have the init that is not defined and breaks up your code.
Possibly is defined elsewhere BUT contains error/s?
Another possible cause can be a canvasjs missing from where you linked it in your html, we cannot check that :)
Browser's console (F12) is your friend in situations like this.
Here is quick working fiddle
Note that this is the preferred way to show your code since it's more testable and easier to jump onto by others.
<canvas id="tcanvas">
function draw() {
var canvas = document.getElementById('tcanvas');
var context=canvas.getContext("2d");
canvas.fillstyle="#0000FF";
context.lineWidth=3;
context.beginPath();
context.moveTo(50,100);
context.lineTo(150,100);
context.lineTo(100,50);
context.lineTo(50,100);
context.fill();
context.closePath();
}
#canvas {
width: 400px;
height: 200px;
border: 1px solid red;
}
I'am very new at this and I'm trying to create a signature drawing program in html, canvas and javascript.
Im trying to get the clear button working with this function;
function clearCanvas() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
But it does not seem to work. I don't really know where in the js script to put the function for it to be executed in the html code.
this is the html code:
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="uppgift-6.js"></script>
<title>Uppgift6</title>
<style type="text/css">
#canvas { position: relative; }
#bildruta { border: 2px solid #000; }
body {font-family: Calibri}
h2 {font-size: 150%; color: BLACK; background-color: BEIGE; padding: 20px; margin: 5px auto; text-align: center;}
</style>
</head>
<body>
<h2>Signatur</h2>
<div id="canvas">
<canvas id="bildruta" width="600" height="400"></canvas>
</div>
<button type="button" onclick="clearCanvas()"> Clear signature </button>
</body>
</html>
Grateful for all help that i can get!
Your ID is not correct. Change your id or change the JS line like this:
function clearCanvas() {
var canvas = document.getElementById('bildruta'); // that's the correct ID
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
}
And it works.
var canvas = document.getElementById('canvas') points to this div <div id="canvas"> not to your canvas.
It should be document.getElementById('bildruta')
Here simple code1 which work fine Demo jsFiddle ,I want the same result in code2
Here the code2 Demo jsfiddle which have two problems.
The scale is not correct to 1400x700 pix
I can only successes to draw from inside function loadImage()
function loadImage(){
oG.width = 1400;
oG.height = 700;
oG.drawImage(scrollImg,0,0);
}
I want to draw from scrollObject.draw()
var scrollObject = {
draw : function() {
oG.drawImage(scrollImg,0,0);
}
};
How can I do that ?
Many thanks.
code1;
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#mycanvas{
border: 1px solid #9C9898;
}
</style>
</head>
<body >
<canvas id="mycanvas" width="1400" height="700" ></canvas>
<script type="text/javascript">
// get the canvas element using the DOM http://jsfiddle.net/centerwow/Z2UzF/show/
var context = document.getElementById('mycanvas').getContext("2d");
context.width = 1400 ;
context.height = 700 ;
var img = new Image();
img.src = "http://s9.postimage.org/433ecr79b/grid.png";
img.onload = function () {
context.clearRect(0,0,1400,700);
context.drawImage(img, 0, 0);
}
</script>
</body>
</html>
code2:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> image not display correct</title>
<style type='text/css'>
body {
background-color:black;
}
.Container {
position: relative;
margin-left:auto;
margin-right:auto;
top:10px;
background-image:url('http://s8.postimage.org/jnu65wk2d/Box_Grass200x100.jpg');
background-repeat:repeat;
width:1000px;
height:500px;
z-index:0;
overflow:hidden;
}
#layer1{
position:absolute;
padding:0;
margin: 0px;
z-index:2;
top:-100px;
left:-200px;
width:1400px;
height:700px;
}
</style>
</head>
<body >
<div class="Container">
<canvas id="layer1">LAYER1</canvas>
</div>
<script type='text/javascript'>//http://jsfiddle.net/centerwow/Z2UzF/1/show/
function loadImage(){
oG.width = 1400;
oG.height = 700;
oG.drawImage(scrollImg,0,0);
}
//layer 1 image then will be object objectGame = oG
var oG = document.getElementById('layer1').getContext("2d");
scrollImg = new Image();
scrollImg.src = "http://s9.postimage.org/433ecr79b/grid.png"; //image size 1400x700px
scrollImg.onload = loadImage;
var scrollObject = {
// Basic attributes
draw : function() {
oG.drawImage(scrollImg,0,0);
}
};
// Now moving it
function move() {
//handle with object background
//clearRect(x, y, width, height)
oG.clearRect(0,0,1400,700);
scrollObject.draw();
}
move();
</script>
</body>
</html>
You can only draw on loadImage(), because when you trigger move() the image have not been loaded yet. You can use a assetmanager to download your assets like images, sounds etc. Here is a great guide to build one - http://www.html5rocks.com/en/tutorials/games/assetmanager/
And for the scale, you can pass a width and height argument to the drawImage function.
context.drawImage(image, x, y, width, height);
You are also setting the height and width of the 2d-context, that you cannot do. Set the width and height in the <canvas> attributes. I once had problems with height/width when I used css, so I would not recommend setting the width/height there.