Skip to content

Instantly share code, notes, and snippets.

@pashute

pashute/CircleSound.htm

Last active June 5, 2017 14:32
Show Gist options
  • Save pashute/1ee2f6cab5c353cefa14d22368936a3d to your computer and use it in GitHub Desktop.
Save pashute/1ee2f6cab5c353cefa14d22368936a3d to your computer and use it in GitHub Desktop.
Download ZIP
CircleSound
Raw
CircleSound.htm
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:13px;
}
circle {
fill-opacity: .8;
}
</style>
</head>
<body>
<audio id="aud0" preload="none">
<source src="tones/Piano_pp_C3.mp3"></source>
</audio>
<audio id="aud1" preload="none">
<source src="tones/Piano_pp_Db3.mp3"></source>
</audio>
<audio id="aud2" preload="none">
<source src="tones/Piano_pp_D3.mp3"></source>
</audio>
<audio id="aud3" preload="none">
<source src="tones/Piano_pp_Eb3.mp3"></source>
</audio>
<audio id="aud4" preload="none">
<source src="tones/Piano_pp_E3.mp3"></source>
</audio>
<audio id="aud5" preload="none">
<source src="tones/Piano_pp_F3.mp3"></source>
</audio>
<audio id="aud6" preload="none">
<source src="tones/Piano_pp_Gb3.mp3"></source>
</audio>
<audio id="aud7" preload="none">
<source src="tones/Piano_pp_G3.mp3"></source>
</audio>
<audio id="aud8" preload="none">
<source src="tones/Piano_pp_Ab4.mp3"></source>
</audio>
<audio id="aud9" preload="none">
<source src="tones/Piano_pp_A4.mp3"></source>
</audio>
<audio id="aud10" preload="none">
<source src="tones/Piano_pp_Bb4.mp3"></source>
</audio>
<audio id="aud11" preload="none">
<source src="tones/Piano_pp_B4.mp3"></source>
</audio>
<form>
<label for="radius">Radius:</label>
<input type="text" id="radius" name="radius" value=150>
<label for="numNodes">Number of elements:</label>
<input type="text" id="numNodes" name="radius" value=12>
<button id="btn1" onclick="playsound()">play</button>
<p />
<a href="http://bl.ocks.org/bycoffe/3404776">Thanks to blocks.org for circle code</a>
<a href="https://www.freesound.org/people/Tesabob2001/sounds/"> Thanks Tesabob for sounds!</a>
</form>
<p />
<div id="canvas"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.min.js"></script>
<script type="text/javascript">
var lastaudid = '#aud0';
(function() {
// a small addition to the code...
var notenames = ['1.do', '2_', '3.re', '4_', '5.mi', '6.fa', '7_', '8.sol', '9_', 'J.la','a_', 'b.si'];
var createNodes = function (numNodes, radius) {
var nodes = [],
width = (radius * 2) + 50,
height = (radius * 2) + 50,
angle,
x,
y,
i;
for (i=0; i<numNodes; i++) {
angle = (i / (numNodes/2)) * Math.PI; // Calculate the angle at which the element will be placed.
// For a semicircle, we would use (i / numNodes) * Math.PI.
x = (radius * Math.cos(angle)) + (width/2); // Calculate the x position of the element.
y = (radius * Math.sin(angle)) + (width/2); // Calculate the y position of the element.
nodes.push({'id': i, 'x': x, 'y': y});
}
return nodes;
}
var createSvg = function (radius, callback) {
d3.selectAll('svg').remove();
var svg = d3.select('#canvas').append('svg:svg')
.attr('width', (radius * 2) + 50)
.attr('height', (radius * 2) + 50);
callback(svg);
}
// here's where I changed the code!!
var createElements = function (svg, nodes, elementRadius) {
circleGroup = svg.selectAll('g')
.data(nodes);
circleGroup.enter()
.append('svg:g')
.attr('transform', function(d, i) {
return 'translate(' + d.x + ',' + d.y + ')';
})
.attr('gnum', function(d, i) { return d.id; })
.attr('id', function(d, i) { return 'g' + d.id; });
circle = circleGroup
.append('svg:circle')
.attr('r', elementRadius)
.attr('id', function (d, i) {
return 'c' + d.id;
})
.attr('onclick', function (d, i) {
return 'playsound(' + d.id + ')';
})
.attr('fill', function (d, i) {
if (d.id == null) return 'red';
if (notenames[d.id].indexOf("_") > -1)
return 'lightgreen';
return 'steelblue';
/*return //'lightgreen';
notenames[d.id]).indexOf("_") > -1)
? 'lightgreen'
: 'steelblue';
*/
})
;
text = circleGroup
.append('text')
.text( function (d, i) {
return notenames[d.id];
})
.attr('fill', 'black')
.attr('font-family','sans-serif')
.attr('font-size','20px')
.attr('text-anchor','middle')
;
}
var draw = function () {
var numNodes = $("#numNodes").val() || 12;
var radius = $("#radius").val() || 40;
var nodes = createNodes(numNodes, radius);
createSvg(radius, function (svg) {
createElements(svg, nodes, 20);
});
}
$(document).ready(function() {
draw();
});
$("#radius, #numNodes").bind('keyup', function(e) {
draw();
});
})();
function playsound(id){
var lastaud = $(lastaudid);
if (!lastaud.paused)
lastaud[0].pause();
lastaudid = '#aud' + id;
var audid = '#aud' + id;
var aud = $(audid);
aud[0].play();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment