StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
17460351
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
2
CommunityOwnedDate
CreationDate
2013-07-04T00:54:18.647
FavoriteCount
0
LastActivityDate
2015-05-30T20:38:10.697
LastEditDate
2015-05-30T20:38:10.697
LastEditorUserId
1630963
OwnerUserId
1630963
ParentId
17446108
PostTypeId
2
Score
0
ViewCount
0
LastEditorDisplayName
text
Body
I've written a simple ADSR synth, allowing the user to enter the parameters for an instrument that will then be synthesized, making it's data available for visualization or playback. I also used 44100 hz. The key to getting a good looking image, is to realize that you don't want to plot just once for each horizontal pixel, but rather once for each sample. In the case of say a 0.2s sample and a 256px wide canvas, you'll need to fit 8,820 samples into 256 pixels - ~34 samples per pixel. It seems like overkill, but it's the only way to get a visualization that doesn't miss data. It's also the way to get an image that resembles those found in sound-editing programs, eg Audacity, Milkytracker etc, etc. Here's a hi-hat drum, Fmax > 10,000 hz <img src="https://i.stack.imgur.com/wxkgA.png" alt="Visualization of a hi-hat drum - Fmax = > 10,000 hz"> EDIT: image added to show that calling closePath does not add a line from the end-point back to the starting point. <img src="https://i.stack.imgur.com/G6DJ9.png" alt="enter image description here"> Here's the visualization code I use: <pre><code>function drawFloatArray(samples, canvas) { var i, n = samples.length; var dur = (n / 44100 * 1000)>>0; canvas.title = 'Duration: ' + dur / 1000.0 + 's'; var width=canvas.width,height=canvas.height; var ctx = canvas.getContext('2d'); ctx.strokeStyle = 'yellow'; ctx.fillStyle = '#303030'; ctx.fillRect(0,0,width,height); ctx.beginPath(); ctx.moveTo(0,height/2); for (i=0; i<n; i++) { x = ( (i*width) / n); y = ((samples[i]*height/2)+height/2); ctx.lineTo(x, y); } ctx.stroke(); ctx.closePath(); canvas.mBuffer = samples; canvas.onclick = function() { playSound(this.mBuffer, 44100, 50); }; } </code></pre>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POHow to scale and draw and Audio Buffer to a Canvas element
 singulars
 PostTypePostTypeId
 PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USenhzflep
UserOwnerUserId
1. USenhzflep
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.