After following the instructions for using Waveform.js and SoundCloud to generate a waveform, it looks great. The issue is that when the stream starts the colors change, specifically the background of the waveform goes transparent. I can’t figure out how to prevent this or how to control the playback colors.
Here is an example, I changed the background of the container to red so you can see it. I am trying to avoid having to manipulate the container to achieve this.
And here is what happens when it starts to play. I’d like the play state to not change colors and to have control over this (to change the color of the buffer and played). Any ideas besides using the custom player which doesn’t allow manipulation of the wave form?
Code for setting up the waveform
SC.get("/tracks/132744204", function (track)
{
var waveform = new Waveform({
container: topPlayer.get(0),
height: "50",
innerColor: "#eee",
outerColor: '#000'
});
waveform.dataFromSoundCloudTrack(track);
var streamOptions = waveform.optionsForSyncedStream();
SC.stream(track.uri, streamOptions, function (stream)
{
topPlayer.stream = stream
topPlayer.stream.play();
});
});
After searching through the source code for waveform.js, the way to manage the playing options is the following:
var streamOptions = waveform.optionsForSyncedStream({
playedColor: '#f00',
loadedColor: '#f00',
defaultColor: '#00f'
});
This isn't documented anywhere so in the event someone else wants to control these colors, you set them on the streamOptions.
Related
I'm very new to both JointJS and SVG, so I am having a hard time interpreting some of the documentation for JointJS. I am trying to get randomly searched images to display in a circle for this project, in a graph that uses JointJS to display and link the images with arrows. I am convinced this shouldn't be as hard as I am making it, but I have spent hours going through the documentation, so I need help. From what I can tell, joint.shapes.standard.Circle elements cannot take an image as a background or fill. I would be really happy to use the .BorderedImage elements, but when I change the radius to make them a circle, the border changes without cropping the image. I also tried to use the .Image element and change the radius, and again the image didn't change. I am under the impression that I could add a clipPath definition to an .Image or .BorderedImage to force a circle, but I am not familiar enough with the syntax to be clear on where to do that, and none of the examples I have found on stackoverflow have given me enough information to do that. I tried using the .define method, and kept getting "cannot read property define of undefined" errors, so I know I wasn't using that right.
Here's what I have in the way of error-free code (rounded border that doesn't crop):
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: document.getElementById('myholder'),
model: graph,
width: 600,
height: 600,
gridSize: 1,
// makes code not draggable
interactive: { elementMove: false, arrowheadMove: false }
});
var borderedImage = new joint.shapes.standard.BorderedImage();
borderedImage.resize(100, 100);
borderedImage.position(100, 100);
borderedImage.attr('root/title', 'joint.shapes.standard.BoarderedImage');
borderedImage.attr('label/text', 'Monster\nImage');
borderedImage.attr('border/rx', "50%");
borderedImage.attr('image/xlinkHref', './assets/images/monster.svg');
borderedImage.addTo(graph);
The code I tried for .define looked like:
joint.shapes.Element.define('standard.BorderedImage', {
attrs: {
body: {
rx: "50%"
}
}
})
Some of the resources I have looked at and couldn't figure out how to use correctly are:
Putting multiple films in a circle in Raphael/Joint.js
How to set background image for a rectangle in JointJs?
Using predefined SVG file for creating a custom JointJS shape with ports
https://resources.jointjs.com/docs/jointjs/v2.1/joint.html#dia.Paper.prototype.properties
Long time lurker but never made an account. Just wanted to preface that I'm by no means a dev and just tinkering and experimenting for fun, so I apologise in advance if I seem really dumb.
I'm working on a dynamic overlay for Twitch streaming and was previously using AS3 but I've switched over to HTML5 now. I'm trying to load an image onto the canvas (which will eventually be a profile picture fetched using Twitch API... but one step at a time). I'm using Adobe Animate and I have the following so far applied in Actions on the first frame of the layer:
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
show_image();
function show_image() {
source_image = new Image();
source_image.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';
source_image.onload = function () {
context.drawImage(source_image, 100, 100);
}
}
When I hit Ctrl+Enter and see it in Chrome, the image appears for the first frame then disappears. I'm not sure how I'm supposed to get it to stay indefinitely. I need to be able to animate it later, and it'll change depending on the latest follow/donation/sub, etc.
I tried extending the frame itself in the timeline, however, this just changed long how it took to loop and didn't make the image itself stay longer. I'm probably missing something really simple!
Any help would be appreciated. Thanks!
Your code is okay if your approach is using a canvas with HTML and JS, without any libraries involved. However, this is not the case, as you are using Animate, and the way to draw graphics with it is different than using default canvas methods like drawImage().
Animate includes the CreateJS suite, which includes the EaselJS library ,and this allows you to use another tools to draw to your canvas. Two or them are the Stage object, the visual container of your animate project, and the Bitmap object, who represents an image, canvas or video. For effects of this question, only both objects are required.
Note that the code below is only for the first frame:
/* It is not necessary to declare the canvas or stage element,
as both are already declared. At this point the stage is ready to be drawn */
show_image();
function show_image() {
var source_image = new Image();
source_image.src = 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png';
source_image.onload = function(event) {
/* A new Bitmap object is created using your image element */
var bmp = new createjs.Bitmap(event.currentTarget);
/* The Bitmap is added to the stage */
stage.addChild(bmp);
}
}
The Google Ideas homepage features an animation that distorts the appearance of some of the text and a button with a static sound effect, in order to simulate signal interference as the content transitions from one item to the next.
Here's a Gif in case they change the design:
How are they achieving this? I can see classes and styles jumping around in the dev tools, so JavaScript is definitely involved, but I can't find the relevant section of script itself.
It's not that hard, especially with html2canvas and canvas-glitch.
Basically you just need to convert the DOM element to canvas, and then manipulate the image data to achieve the glitch effect. And with these two libs, that task becomes quite trivial.
html2canvas(node, {
onrendered: function (canvas) {
// hide the original node
node.style.display = "none";
// add the canvas node to the node's parent
// practically replacing the original node
node.parentNode.appendChild(canvas);
// get the canvas' image data
var ctx = canvas.getContext('2d');
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// glitch it
var parameters = { amount: 1, seed: Math.round(Math.random()*100), iterations: 5, quality: 30 };
glitch(imageData, parameters, function(imageData) {
// update the canvas' image data
ctx.putImageData(imageData, 0, 0);
});
}
});
Click here for a demo: https://jsfiddle.net/ArtBIT/x12gvs1v/
I'm working on a custom Soundcloud player for my website using waveform.js to generate waveforms. It works great but it lacks the scrubber functionality. How can I add that?
I'm not a JS wizard, still learning my ways around so I'll be very thankful for any help or suggestions!
Update IV: I found a new way of including canvas generated waveforms into original SoundCloud Custom Player sc-player.js.
First of all I found a line of code responsible for HTML structure of the player and added id="waveform" to sc-waveform container on line 529:
.append('<div class="sc-time-span"><div class="sc-waveform-container" id="waveform">
</div><div class="sc-buffer"></div><div class="sc-played"></div></div>')
Then I updated the line 676, replacing img with canvas
$available = $scrubber.find('.sc-waveform-container canvas'),
Next, I located a piece of code responsible for embedding the original image of waveform on line 340 and commented it out:
// $('.sc-waveform-container', $player).html('<img src="' + track.waveform_url +'" />');
And then I posted the code below at the bottom of my page:
<script>
SC.get("/tracks/80348246", function(track){
var waveform = new Waveform({
container: document.getElementById("waveform"),
height: 40,
innerColor: '#ffffff'
});
waveform.dataFromSoundCloudTrack(track);
});
//----------- end of insterted waveform.js code ----------------------
</script>
Results are very promising, Now I have fully customizable waveform and scrubber is working as well. However there are still things I'd like to fix.
In Chrome, when I press play and pause, then click the waveform, the track starts playing, but the play button doesn't change its state. Then need to double click it to stop the track.
The buffer and progress bar are still just the sc-player divs in the background. How could I link sc-player.js and waveform.js together so the progress is generated on the waveform canvas (as in example on http://waveformjs.org/)?
Any ideas how to fix those?
Here's the player on the live website:
http://www.code.spik3s.com/rnr/
on play call
myVar=setInterval(Timed,100);
function Timed() {
total_duration = duration of the track playing;
current_duration = the current position of the track.
width = canvas width;
pointer = the id of the pointer being used to show the progress.
position = (canvas_width / total_duration) * current_duration;
pointer.style.left = position;
}
you'll have to set the information in, but something like this will do
I've created a html5 web app to display data, and to mimmic swipe gestures I've used A Jquery plugin Called Wipetouch. When a wipe gesture is triggered, all I do is redraw all of my data with new numbers via a javascript function. I've realized that this isn't the optimal solution as the images are static, and are currently being loaded every time I swipe. Any ideas would be great.
edit
var img01 = new Image();
enter code here
img01.onload = function () {
ctx.drawImage(img01, x, y, img01.width * 2, img01.height * 2);
ctx.fillStyle = "white";
//draw text
ctx.font = "bold 28pt Calibri";
ctx.fillText(monthname[date.getMonth()], x+51, y+135);
ctx.fillText(d[1], x+47, y+37);
}
img01.src = 'images/retail_car.png';
I apologize for not making this clear earlier. I'm drawing the images on my canvas, and this code is triggered each time the wipetouch plugin registers a swipe. I'd like to make everything stay in the canvas, so the CSS fix that was mentioned won't work in my case.
You could put the images in your html and give them a class in css that has display:none;. Then when you call the function you could change the class of the displayed image to one with display: block; or however you need them displayed. Just be sure to change the class back after you swipe so that the new image appears and the old image is no longer visible. That way they are not being generated over again each time you call the swipe.