Add WebMidiLink html

logue · Dec 28, 2017 · 97e7795 · 97e7795
1 parent a4f0e93
commit 97e7795
Show file tree

Hide file tree

Showing 14 changed files with 252 additions and 143 deletions.
diff --git a/bin/sf2.parser.js b/bin/sf2.parser.js
diff --git a/bin/sf2.synth.js b/bin/sf2.synth.js
diff --git a/export/parser.js b/export/parser.js
@@ -1,2 +1,4 @@
 import Parser from "../src/Parser.ts"
-export default Parser
+export {
+ Parser
+}
diff --git a/export/synth.js b/export/synth.js
@@ -1,2 +1,4 @@
 import WebMidiLink from "../src/WebMidiLink.ts"
-export default WebMidiLink
+export {
+ WebMidiLink
+}
diff --git a/fixture/TestSoundFont.sf2 b/fixture/TestSoundFont.sf2
diff --git a/fixture/clarinet_angel_pure_v1.1.sf2 b/fixture/clarinet_angel_pure_v1.1.sf2
diff --git a/public/bin b/public/bin
@@ -0,0 +1 @@
+../bin
diff --git a/public/fixture b/public/fixture
@@ -0,0 +1 @@
+../fixture
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <title>Document</title>
+ <script src="./bin/sf2.synth.js"></script>
+ <script>
+ const url = './fixture/TestSoundFont.sf2'
+ const wml = new WebMidiLink()
+ wml.setLoadCallback(function(arraybuffer) {
+ // ロード完了時の処理
+ })
+ wml.setup(url)
+ </script>
+ <link rel="stylesheet" href="style.css">
+</head>
+<body>
+ <div class="synth"></div>
+</body>
+</html>
diff --git a/public/style.css b/public/style.css
@@ -0,0 +1,99 @@
+.synth {
+ font-size: 12px;
+ margin: 0;
+ background: rgb(0, 0, 0);
+ color: rgb(159, 159, 253);
+ font-family: Consolas;
+ overflow: hidden;
+ /* -webkit-app-region: drag; */
+ border-top: 1.5em rgba(255, 255, 255, 0.13) solid;
+ padding-top: 0.25em;
+}
+
+.synth .keys>div {
+ float: left;
+}
+
+.synth .keys>.white, .keys>.black {
+ position: relative;
+}
+
+.synth .keys {
+ overflow: hidden;
+ background: black;
+ -webkit-app-region: no-drag;
+}
+
+.synth .keys>.white {
+ width: 5px;
+ height: 20px;
+ background: rgb(85, 85, 90);
+ border-right: 1px solid black;
+ box-sizing: border-box;
+}
+
+.synth .keys>.black {
+ width: 3px;
+ background: rgb(0, 0, 0);
+ height: 11px;
+ left: 1px;
+ margin-left: -3px;
+ z-index: 999;
+}
+
+.synth .volume::before {content: "VOL:";}
+
+.synth .panpot::before {content: "PAN:";}
+
+.synth .pitchBend::before {content: "BEND:";}
+
+.synth .pitchBendSensitivity::before {
+ content: "RANGE:";
+}
+
+.synth select {
+ background: transparent;
+ color: currentColor;
+ border: none;
+ outline: none;
+ font-family: Consolas;
+ width: 12em;
+ font-size: 100%;
+ -webkit-app-region: no-drag;
+}
+
+.synth option {
+ background: black;
+ color: rgb(159, 159, 253);
+}
+
+.synth .program, .volume, .panpot, .pitchBend, .pitchBendSensitivity {
+ display: inline-block;
+}
+
+.synth .key.white.note-on,
+.synth .key.black.note-on {
+ background: rgb(246, 196, 78);
+}
+
+.synth h1 {
+ float: left;
+ font-size: 240%;
+ margin: 0 7px 0px 0;
+}
+
+.synth header p {
+ margin: 0;
+}
+
+.synth header {
+ overflow: hidden;
+}
+
+.synth header .version {
+ opacity: 0.7;
+}
+
+.synth button[disabled] {
+ opacity: 0.4;
+}
diff --git a/src/Parser.ts b/src/Parser.ts
@@ -16,7 +16,7 @@ export interface ParseResult {
  sampleHeader: Sample[]
  sample: Int16Array[]
  samplingData: Chunk
- info: {}
+ info: { [index: string]: string }
 }
 
 export default function parse(input: Uint8Array, option: RiffParserOptions = {}): ParseResult {
@@ -99,8 +99,8 @@ function getChunkList(chunk, data, expectedType, expectedSignature) {
  return parseRiff(data, stream.ip, chunk.size - 4)
 }
 
-function parseInfoList(chunk: Chunk, data: Uint8Array): {} {
- const info = {}
+function parseInfoList(chunk: Chunk, data: Uint8Array) {
+ const info: { [index: string]: string } = {}
  const chunkList = getChunkList(chunk, data, "LIST", "INFO")
 
  for (let p of chunkList) {

diff --git a/src/Structs.ts b/src/Structs.ts
@@ -197,9 +197,6 @@ export class Sample {
  }
 }
 
-/**
- * @enum {number}
- */
 export const SampleLink = {
  monoSample: 1,
  rightSample: 2,

diff --git a/src/WebMidiLink.ts b/src/WebMidiLink.ts
@@ -59,8 +59,9 @@ export default class WebMidiLink {
  synth = this.synth = new Synthesizer(ctx)
  synth.init()
  synth.refreshInstruments(input)
+ synth.connect(ctx.destination)
  const view = this.view = new View()
- document.body.appendChild(view.draw(synth))
+ document.body.querySelector(".synth")!.appendChild(view.draw(synth))
  this.midiMessageHandler.synth = synth
  window.addEventListener('message', this.onmessage.bind(this), false)
  } else {

diff --git a/webpack.config.js b/webpack.config.js
@@ -9,7 +9,6 @@ module.exports = {
  output: {
  path: path.join(__dirname, "bin"),
  filename: "sf2.[name].js",
- library: "[name]",
  libraryTarget: "umd"
  },
  resolve: {