听听代码的声音-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：听听代码的声音，每一段代码都有自己独特的声音

代码标签：

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/codemirror.css">
  
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
  background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(50%, #ccc), to(#eee));
  background: linear-gradient(#eee 0%, #ccc 50%, #eee 100%);
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
}

#menu {
  text-align: center;
  position: absolute;
  height: 40px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

button {
  position: relative;
  margin: auto;
  text-align: center;
  padding: 5px;
  padding-left: 25px;
  border: 0;
  display: inline-block;
  background: transparent;
  border: 1px solid;
  z-index: 99;
}

#action {
  background: #7db081;
  color: #333;
  font-size: 1.2em;
  line-height: 1.2em;
}

#export {
  background: #6f9eba;
}

#action:before, #export:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7px;
  margin: auto;
  width: 0;
  height: 0;
  border: 8px solid;
  border-left: 12px solid #fff;
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

#export:before {
  border-left: 8px solid transparent;
  border-top: 10px solid #fff;
  top: 9px;
  left: 6px;
  margin: auto;
}

#file {
  position: absolute;
  bottom: 7em;
  z-index: 999;
  background-color: #fff;
  padding: 0.5em;
  border-radius: 5px;
  left: 0;
  right: 0;
  margin: auto;
  display: inline-block;
  width: 213px;
}

.callout {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 200px;
  margin: auto;
  font-family: sans-serif;
  font-size: 60%;
  text-align: center;
  background: #fbd044;
  box-shadow: 0 0 3px 0 #000;
  padding: 5px 0;
  border-radius: 0 0 30px 30px;
}

.CodeMirror {
  padding: 1em;
  font-size: 1.2em;
  line-height: 1.6em;
}

.cm-s-monokai span.cm-comment {
  color: #ACACAC;
}

.cm-s-monokai .CodeMirror-gutters, .cm-s-monokai.CodeMirror {
  background: transparent;
}

.cm-s-monokai span.cm-variable {
  color: #D16A2D;
}

.cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {
  color: #6A9BB8;
}

.cm-s-monokai span.cm-operator {
  color: #828282;
}

span {
  color: #333;
}

.cm-s-monokai span.cm-number {
  color: #7DB081;
}
</style>



</head>

<body translate="no" >
  <div id='menu'>
  <button id='action'>play</button>
  <button id='export'>export</button>
</div>
<!--%input#file{:type=>"file"}-->
<div class='callout audio'>Please turn your audio on!</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/codemirror/codemirror.5.26.js"></script>

  
      <script >
//____________________________________________
var time = 0;
//_______________________________________________________
(function (console) {
  console.save = function (data, filename) {
    if (!data) {
      console.error('Console.save: No data');
      return;
    }
    if (!filename) filename = 'console.json';
    if (typeof data === "object") {
      data = JSON.stringify(data, undefined, 4);
    }
    var blob = new Blob([data], { type: 'text/json' }),
    e = document.createEvent('MouseEvents'),
    a = document.createElement('a');
    a.download = filename;
    a.href = window.URL.createObjectURL(blob);
    a.dataset.downloadurl = ['text/json', a.download, a.href].join(':');
    e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    a.dispatchEvent(e);
  };
})(console);

function pointInCircle(x, y, cx, cy, radius) {
  var distsq = (x - cx) * (x - cx) + (y - cy) * (y - cy);
  return distsq <= radius * radius;
}
//_______________________________________________________
var GLOBAL = {

  LAST_: new Date(),
  now: new Date(),
  then: new Date(),
  elapsed: 0,
  timestep: 1000, //60fps / 1000 = 1sek
  fps: 0,
  action: false,
  resolution: 4410,
  changed: false,
  data: generate_starting_points(),
  formel: '//HIT PLAY!\n//Listen to your code!\n//PRO TIP A: Hover the points while playing\n//PRO TIP B: Export your points for later use...i will add an import function in the next few days \n\nwindow.innerHeight/2 + 20* Math.sin(0.00215 * i) * Math.cos(0.15 * i)*10',
  current: null,
  mouse: {
    x: 0,
    y: 0,
    radius: 50 },

  grid: {
    bool: false,
    count: 50,
    color: '#474747' } };



//_________________________________________

var input_ = document.createElement('textarea');
//input_.setAttribute('rows',3);
var formel = document.createTextNode(GLOBAL.formel);
input_.appendChild(formel);
document.body.appendChild(input_);

var editor = CodeMirror.fromTextArea(input_, {
  lineNumbers: true,
  mode: 'javascript',
  theme: 'monokai',
  lineWrapping: true });


editor.on("change", function (cm, change) {
  GLOBAL.formel = cm.getValue();
  GLOBAL.data = generate_starting_points();
  stopSound(GLOBAL.current);
  sound_by_array(GLOBAL.data);

});
editor.setSize(window.innerWidth, window.innerHeight);

//_________________________________________
var action_button = document.getElementById('action');
action_button.addEventListener('click', function () {
  GLOBAL.action = !GLOBAL.action;
  c.clearRect(0, 0, window.innerWidth, window.innerHeight);
  if (GLOBAL.action) {
    sound_by_array(GLOBAL.data);
  }
  if (!GLOBAL.action) {
    GLOBAL.data = generate_starting_points();
    stopSound(GLOBAL.current);
  }
}, false);
//_________________________________________
var export_button = document.getElementById('export');
export_button.addEventListener('click', function () {
  console.save(GLOBAL.data);
}, false);
//________________________________________
function rand_num(min, max, bool) {
  var num = Math.floor(Math.random() * max) + min;
  if (bool || typeof bool === "undefined") {
    num *= Math.floor(Math.random().........完整代码请登录后点击上方下载按钮下载查看