I am new in Canvas of HTML5. What I want to do. I want a microphone audio visualizer just like windows Sound visualizer of microphone (control panel => hardware and sound => Sound => recording)
Can anybody tell me Please how I will create it in canvas and adjust with web audio API ?
An other problem is My visualizer is more sensitive. How i will adjust it. I want blank spectrum if no sound is there.
I am sharing a picture what I exactly want.
Img url: http://phillihp.com/wp-content/uploads/2011/12/winamp-step-pre-step-1.png
Please help me out to solve this problem.
Untitled Document
<body>
<canvas id="test"></canvas>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
navigator.webkitGetUserMedia({audio:true}, function(stream){
audioContext = new AudioContext();
analyser = audioContext.createAnalyser();
microphone = audioContext.createMediaStreamSource(stream);
javascriptNode = audioContext.createScriptProcessor(1024, 1, 1);
analyser.smoothingTimeConstant = 0.0;
analyser.fftSize = 512;
microphone.connect(analyser);
analyser.connect(javascriptNode);
javascriptNode.connect(audioContext.destination);
//canvasContext = $("#canvas")[0].getContext("2d");
canvasContext = document.getElementById("test");
canvasContext= canvasContext.getContext("2d");
javascriptNode.onaudioprocess = function() {
var array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(array);
var values = 0;
var length = array.length;
for (var i = 0; i < length; i++) {
values += array[i];
}
var average = values / length;
canvasContext.clearRect(0, 0, 150, 300);
canvasContext.fillStyle = '#00ff00';
canvasContext.fillRect(0,130-average,25,140);
}
}, function(e){ console.log(e); }
);
</script>
</body>
Check out this code sample: https://github.com/cwilso/volume-meter/.
Based on cwilso answer. Fixed the problem with mobile devices. "StartNow" is the main JS function in main.js (originallt called by window.onload):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Volume Meter</title>
<script src="volume-meter.js"></script>
<script src="main.js"></script>
</head>
<body onload="javascript:StartNow()"> >
<p>uses audioContext.createScriptProcessor(buffer size) Web Audio API. Use https://webaudio.github.io/web-audio-api/#audioworklet</p>
<canvas id="meter" width="1100" height="60"></canvas>
<p>On Android press button to start (fixes new security requirement added in the new Android OS version)</p>
<button onclick="javascript:StartNow()">Start</button>
</body>
</html>
On Android you need to press the button to start.
This is necessary because of a NEW security requirement added in the new Android OS.
Related
I'm using the drawing pad (pen tool) plugin of Jquery to draw with different colors and having an image in the canvas as background. My purpose is to have a button to clear the drawing over the canvas. The way I try to do it remove the background image along with the drawing. How can I keep the background and remove the drawing on clicking the clear button ?
My fiddle : https://jsfiddle.net/ub3s9go7/
<script>
$(document).ready(function() {
// set background
var urlBackground = 'https://picsum.photos/id/100/500/400';
var imageBackground = new Image();
imageBackground.src = urlBackground;
imageBackground.setAttribute('crossorigin', 'anonymous');
$("#target").drawpad();
var contextCanvas = $("#target canvas").get(0).getContext('2d');
imageBackground.onload = function(){
contextCanvas.drawImage(imageBackground, 0, 0);
}
// Need to clear only the drawing not the background image
$("#clearDrawing").click(function() {
contextCanvas.clearRect(0, 0, 750, 423);
});
});
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cnbilgin.github.io/jquery-drawpad/jquery-drawpad.css" />
<style>
body {background-color:rgb(248, 255, 227)}
#target {
width:500px;
height:400px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cnbilgin.github.io/jquery-drawpad/jquery-drawpad.js"></script>
</head>
<body>
<button id="clearDrawing">Clear Drawing</button>
<div id="target" class="drawpad-dashed"></div>
</body>
</html>
This answer is an improvisation on my previous answer at https://stackoverflow.com/a/67155647/3706717
So we have new requirement: delete/clear previous drawings
There are some possible approach here:
#sinisake in comment suggested to reload the background so that we have fresh canvas with only the background intact (but for some reason, white doodle make the background gone)
the library must have "delete" or "erase" doodle feature (which it didn't have)
save each changes of the drawing when user click "save", so that user can "undo" to previous version of the drawing (like git's git commit and git reset command), I'll be using this approach in my answer
Ideally, you should use server-side language and persistent storage (e.g.: database) to store user's doodling history. But in this case, to simulate such thing I'll be using javascript's localStorage API https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
So every time I'm calling localStorage API, just assume that I'm calling some ajax to some endpoint.
Fiddle: https://jsfiddle.net/0da572jy/3/
Here is stack fiddle (modified because browser didn't allow stack fiddle to use localStorage)
// polyfill for localStorage API
var localStorage1 = {
items: {},
removeItem: function(key) {
window.localStorage1.items[key] = null;
},
getItem: function(key) {
return window.localStorage1.items[key];
},
setItem: function(key, val) {
return window.localStorage1.items[key] = val;
},
}
//window.localStorage = localStorage1;
window.localStorage1 = localStorage1;
$(document).ready(function() {
$("#save").click(function() {
// I already explained the #save logic in https://stackoverflow.com/a/67155647/3706717
//console.log("save");
var base64Image = $("#target canvas").get(0).toDataURL();
//console.log(base64Image);
$("#outputBase64FormInput").val(base64Image);
$("#outputBase64").html(base64Image);
// load/read saved states/histories
var savedImageJson = window.localStorage1.getItem("savedImage");
//console.log(savedImageJson);
// if the history is undefined, create empty array
if(savedImageJson == null || typeof savedImageJson == "undefined") savedImageJson = "[]";
// parse the history
var savedImageArr = JSON.parse(savedImageJson);
// add current state as a new item to history
savedImageArr.push(base64Image);
// save the modified (added history)
window.localStorage1.setItem("savedImage", JSON.stringify(savedImageArr));
$("#numOfSavedHistory").html( savedImageArr.length );
});
// clear button just clears the localStorage (or any kind of API you use for persistent storage
$("#clear").click(function() {
//console.log("save");
window.localStorage1.removeItem("savedImage");
$("#numOfSavedHistory").html( 0 );
});
// undo last change (rollback to last state when you clicked save)
$("#undo").click(function() {
// clear canvas (to prevent white ink bug that also clears the background)
canvas.width = canvas.width;
//console.log("undo");
// load/read saved states/histories
var savedImageJson = window.localStorage1.getItem("savedImage");
//console.log(savedImageJson);
// if the history is undefined, create empty array
if(savedImageJson == null || typeof savedImageJson == "undefined") savedImageJson = "[]";
// parse the history
var savedImageArr = JSON.parse(savedImageJson);
// delete last item in history
savedImageArr.pop();
// save the modified (pop'ed history)
window.localStorage1.setItem("savedImage", JSON.stringify(savedImageArr));
// draw old picture on canvas
var imageOld = new Image();
imageOld.src = savedImageArr[savedImageArr.length-1];
imageOld.onload = function() {
contextCanvas.drawImage(imageOld, 0, 0);
};
$("#numOfSavedHistory").html( savedImageArr.length );
});
// set background
var urlBackground = 'https://picsum.photos/id/100/500/400';
var imageBackground = new Image();
imageBackground.src = urlBackground;
//imageBackground.crossorigin = "anonymous";
imageBackground.setAttribute('crossorigin', 'anonymous');
$("#target").drawpad();
var canvas = $("#target canvas").get(0);
var contextCanvas = canvas.getContext('2d');
imageBackground.onload = function(){
contextCanvas.drawImage(imageBackground, 0, 0);
$("#clear").trigger("click"); // clear previous drawings when page refreshed
$("#save").trigger("click"); // save the first image (background only)
}
});
body {background-color:rgb(248, 255, 227)}
#target {
width:500px;
height:400px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cnbilgin.github.io/jquery-drawpad/jquery-drawpad.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cnbilgin.github.io/jquery-drawpad/jquery-drawpad.js"></script>
</head>
<body>
<button id="undo">Undo</button>
<button id="save">Save</button>
<button id="clear">Clear Saved Picture</button>
<span id="numOfSavedHistory">0</span>
<div id="target" class="drawpad-dashed"></div>
<div id="outputBase64"></div>
</body>
</html>
I have an html5 basic presentation that was generated using Flash 6 and CreateJS.
The presentation is basically a bunch of flash keyframes with stop(); commands.
Now, here come my questions:
1. How do I target a specific frame on this presentation, using a link, located on a different page (something like the html anchor) ?
2. is there an easy way to add some cool frames transitions between those frames, using some kind of an open source library?
I'm a designer, not a programmer, so I have only little knowledge in coding.
Any help will be appreciate.
Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from main</title>
<script src="easeljs-0.6.0.min.js"></script>
<script src="tweenjs-0.4.0.min.js"></script>
<script src="movieclip-0.6.0.min.js"></script>
<script src="preloadjs-0.3.0.min.js"></script>
<script src="main.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var manifest = [
{src:"images/bg_b.jpg", id:"bg_b"},
];
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete() {
exportRoot = new lib.main();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="1024" height="768" style="background-color:#FFFFFF"></canvas>
</body>
</html>
CreateJS supports the use of basic actionscript by way of providing direct translations in javascript. For example, if you add the following bit of code to your timeline, the CreateJS publisher is smart enough to add a javascript call to stop the timeline at that position.
/* js
this.stop();
*/
To have a link skip to a location in the main timeline, you would need to use gotoAndPlay, or gotoAndStop depending on whether you want playback to continue. When CreateJS publishes your .fla, it creates a javascript instance of the main timeline movieclip called exportRoot. You can use this instance to manipulate the timeline via javascript.
Question 1: Changing location from another page
Using your code as an example now, notice the index.html page links to your Flash exported page (which I am calling target.html) with different hash tag locations for the frames. Also notice I have added the jquery library to your exported page, and a couple lines after the createjs.Ticker.addEventListener("tick", stage); to gotoAndStop based on the current hash, and to listen to future hash changes to gotoAndStop.
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
Goto frame 5
Goto frame 10
Goto frame 15
Goto frame 20
</body>
</html>
target.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from main</title>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="easeljs-0.6.0.min.js"></script>
<script src="tweenjs-0.4.0.min.js"></script>
<script src="movieclip-0.6.0.min.js"></script>
<script src="preloadjs-0.3.0.min.js"></script>
<script src="main.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var manifest = [
{src:"images/bg_b.jpg", id:"bg_b"},
];
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete() {
exportRoot = new lib.main();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", stage);
//When doc loads, check if there is a hash and gotoAndStop if there is
if(document.location.hash)
exportRoot.gotoAndStop(document.location.hash.replace('#', ''));
//Use jQUery to listen to the hash change event and gotoAndStop to new location when event fires
$(window).on('hashchange', function() {
exportRoot.gotoAndStop(document.location.hash.replace('#', ''));
});
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="1024" height="768" style="background-color:#FFFFFF"></canvas>
</body>
</html>
Question 2: Transitions
As far as page transitions go, I would suggest either creating them in the timeline, and calling gotoAndPlay(FRAME_OF_THE_TRANSITION) until you start to get more comfortable with the CreateJS library to take a more object oriented approach.
I have created a streaming webcam with html5. At the moment I can take a picture through my web cam, but I would like to know if it is possible to choose media stream device from the list, e.g. I have two web cams I want to choose the webcam to activate. How can I do that with html5 getUserMedia() call?
Thanks!
You can get the list of web camera
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Video Camera List</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>
<style type="text/css" media="screen">
video {
border:1px solid gray;
}
</style>
</head>
<body>
<script>
if (!MediaStreamTrack) document.body.innerHTML = '<h1>Incompatible Browser Detected. Try <strong style="color:red;">Chrome Canary</strong> instead.</h1>';
var videoSources = [];
MediaStreamTrack.getSources(function(media_sources) {
console.log(media_sources);
// alert('media_sources : '+media_sources);
media_sources.forEach(function(media_source){
if (media_source.kind === 'video') {
videoSources.push(media_source);
}
});
getMediaSource(videoSources);
});
var get_and_show_media = function(id) {
var constraints = {};
constraints.video = {
optional: [{ sourceId: id}]
};
navigator.webkitGetUserMedia(constraints, function(stream) {
console.log('webkitGetUserMedia');
console.log(constraints);
console.log(stream);
var mediaElement = document.createElement('video');
mediaElement.src = window.URL.createObjectURL(stream);
document.body.appendChild(mediaElement);
mediaElement.controls = true;
mediaElement.play();
}, function (e)
{
// alert('Hii');
document.body.appendChild(document.createElement('hr'));
var strong = document.createElement('strong');
strong.innerHTML = JSON.stringify(e);
alert('strong.innerHTML : '+strong.innerHTML);
document.body.appendChild(strong);
});
};
var getMediaSource = function(media) {
console.log(media);
media.forEach(function(media_source) {
if (!media_source) return;
if (media_source.kind === 'video')
{
// add buttons for each media item
var button = $('<input/>', {id: media_source.id, value:media_source.id, type:'submit'});
$("body").append(button);
// show video on click
$(document).on("click", "#"+media_source.id, function(e){
console.log(e);
console.log(media_source.id);
get_and_show_media(media_source.id);
});
}
});
}
</script>
</body>
</html>
In the latest Chrome Canary (30.0.1587.2) it looks like you can enable device enumeration in chrome://flags (looks like it might already be enabled) and use the MediaStreamTrack.getSources API to select the camera.
See this WebRTC bug and mailing list post for more details.
I'm trying to use canvas object on iPad; the user need to draw a free curve with the finger and when he releases the finger the system must close the curve and fill it.
Actually I wrote down the following code but the problem is that it draws but it does not close the path on finger release.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=768px, maximum-scale=1.0" />
<title>sketchpad</title>
<script type="text/javascript" charset="utf-8">
window.addEventListener('load',function(){
// get the canvas element and its context
var canvas = document.getElementById('sketchpad');
var context = canvas.getContext('2d');
var img = new Image();
img.src = 'imp_02.jpg';
context.drawImage(img,0,0,600,600);
var colorPurple = "#cb3594";
context.strokeStyle=colorPurple;
context.lineWidth = 5;
context.fillStyle = "red";
// create a drawer which tracks touch movements
var drawer = {
isDrawing: false,
touchstart: function(coors){
context.beginPath();
context.moveTo(coors.x, coors.y);
this.isDrawing = true;
},
touchmove: function(coors){
if (this.isDrawing) {
context.lineTo(coors.x, coors.y);
context.stroke();
}
},
touchend: function(coors){
if (this.isDrawing) {
context.touchmove(coors);
context.closePath();
this.isDrawing = false;
}
}
};
// create a function to pass touch events and coordinates to drawer
function draw(event){
// get the touch coordinates
var coors = {
x: event.targetTouches[0].pageX,
y: event.targetTouches[0].pageY
};
// pass the coordinates to the appropriate handler
drawer[event.type](coors);
}
// attach the touchstart, touchmove, touchend event listeners.
canvas.addEventListener('touchstart',draw, false);
canvas.addEventListener('touchmove',draw, false);
canvas.addEventListener('touchend',draw, false);
// prevent elastic scrolling
document.body.addEventListener('touchmove',function(event){
event.preventDefault();
},false); // end body.onTouchMove
},false); // end window.onLoad
</script>
<style type="text/css"><!--
body{margin:0;padding:0; font-family:Arial;}
#container{position:relative;}
#sketchpad{ border: 1px solid #000;}
--></style>
</head>
<body>
<div id="container">
<canvas id="sketchpad" width="766" height="944">
Sorry, your browser is not supported.
</canvas>
</div>
</body>
</html>
I don't understand what I missed.
Is there anyone who can help me..... I would appreciate a lot!!
You are fetching the touch end co-ordinates from a wrong array.
event object has one more array called changedTouches where you can find the co-ordinates of the point where the touch ended. These end co-ordinates are not in targetTouches array.
So you need
endCoordX = event.changedTouches[0].pageX;
endCoordY = event.changedTouches[0].pageY;
[modify the above code to fit into your scenario. hope you got the concept.... And seriuosly i too got stuck on the same point in the past and wasted more than an hour to know this fact....]
I was performing some tests with the WebAudio API in iOS6. It seems that when you click on a button, the AudioBufferSourceNode will be created correctly and connected to the Contexts destination.
I was simply wondering if there was any way of playing a sound automatically when a page is loaded, as iOS6 devices seem to build the SourceNode correctly, but no sound comes out.
I have posted my code below:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML 5 WebAudio API Tests</title>
<script type="text/javascript">
var audioContext,
audioBuffer;
function init() {
try {
audioContext = new webkitAudioContext();
initBuffer('resources/dogBarking.mp3');
} catch(e) {
console.error('webkitAudioContext is not supported in this browser');
}
}
function initBuffer(desiredUrl) {
var url = desiredUrl || '';
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "arraybuffer";
request.onload = function() {
audioContext.decodeAudioData(request.response, function(buffer) {
audioBuffer = buffer;
}, onError);
}
request.send();
}
function playSound(startTime, endTime) {
var audioSource = audioContext.createBufferSource();
audioSource.buffer = audioBuffer;
audioSource.connect(audioContext.destination);
audioSource.noteOn(0);
audioSource.noteOff(10);
}
</script>
</head>
<body onload="init()">
<script type="text/javascript">
(function() {
var buttonNode = document.createElement('input');
buttonNode.setAttribute('type', 'button');
buttonNode.setAttribute('name', 'playButton');
buttonNode.setAttribute('onclick', 'playSound(0, 1)')
buttonNode.setAttribute('value', 'playSound()');
document.body.appendChild(buttonNode);
document.write('<a id="test" onclick="playSound(0, 2)">hello</a>');
var testLink = document.getElementById('test');
var dispatch = document.createEvent('HTMLEvents');
dispatch.initEvent("click", true, true);
testLink.dispatchEvent(dispatch);
}());
</script>
</body>
</html>
I hope this makes sense.
Kind regards,
Jamie.
This question is very similar to No sound on iOS 6 Web Audio API . WebAudio API needs user input to be initialized and after first sound plays in this way WebAudioAPI works greatly without any actions needed during current session.
You can initialize API by adding listener to first window touchstart event, like this:
w.addEventListener('touchstart', myFunctionThatPlaysAnyWebAudioSound);