Comments (3)
Problem 1: The sample generation
The actual synthesis should be done in a WebWorker. The api would be something like this:
var synthWorker = new Worker('alphaSynthWorker.js');
synthWorker.addEventListener('message', function(e) {
var data = e.data;
switch(data.event)
{
case 'sfloaded': console.log('SoundFont loaded and ready'); break;
case 'sfLoadFailed': console.log('SoundFont could not be loaded: ' + data.message); break;
case 'midiloaded': console.log('MidiFile loaded and ready'); break;
case 'midiLoadFailed': console.log('MidiFile could not be loaded: ' + data.message); break;
case 'ready': console.log('Ready to play'); break;
case 'synthCompleted': console.log('New buffer synthesized: ' + data.samples.length + " / " + data.position); break;
case 'finished': console.log('Playback finished'); break;
}
});
synthWorker.postMessage({'cmd': 'loadsf', 'url': 'mySoundFont.sf2'});
synthWorker.postMessage({'cmd': 'loadMidi', 'midi': Uint8Array});
synthWorker.postMessage({'cmd': 'seek', 'position': 8400});
synthWorker.postMessage({'cmd': 'synth'});
The Internet Explorer only supports WebWorkers in IE10 and Android since 4.4. (http://caniuse.com/#search=worker) . For the IE we could try to run alphaSynth completely in a Flash fallback solution, but Android <4.4 still has no solution.
from alphatab.
Problem2: Sample Playback
The Web Audio API is quite new but already supported by Firefox, Chrome, Safari and Opera. http://caniuse.com/#feat=audio-api
A Flash fallback could be provided for the Internet Explorer.
On the fly synthesizing
The synthesizing and playing could be implemented like this http://stackoverflow.com/questions/6593738/audio-data-streaming-in-html5
alphaTab synthesizes the buffers, and new absolute timed buffers are played. Let's say we always fill 5 buffers and let them play. As soon one buffer finishes playing, we request a new filled buffer.
Synthesize all samples
The main problem in this case would be the memory. A 5 minutes song in raw audio samples will easily need >50MB. In addition it will take quite some time till the full song is synthesized.
But still this would be possible. And it would be easier to let a complete sample buffer play than stitch multiple small buffers together.
from alphatab.
Flash Implementation
So far so good: A first version of alphaSynth is implemented and running within a hidden flash movie. I also have created the necessary extensions and jQuery plugins to integrate alphaSynth into alphaTab:
- alphaSynth loads a SoundFont2 file and a midi file generated from an alphaTab score.
- The position within the song (tick and milliseconds) is sent to JavaScript and position cursors are positioned on top of the canvas.
The API is currently a bit weak designed but for a very first version it's working. Next step is to generate the midi data correctly. It seems the generated midi file gets broken if there are multiple tracks. But this should be no problem to fix.
from alphatab.
Related Issues (20)
- Source Maps should not be shipped in NPM package
- Slash Notation
- Numbered Notation HOT 1
- Directions
- Free Time
- New Beat Level Effects
- New Note Level Effects
- Extend MusicXML Support for new notation features
- Importing the alphaTab WebPack plugin in ESM fails.
- Implement full text measuring system for all engines and platforms
- Xml Section parse error while some child tags may not exist
- Tempo/bpm marker overlaps chord symbol on first beat HOT 1
- Improve TypeScript types for JSON settings object
- [vite-plugin-alphatab-url] plugins is not a function HOT 1
- Expose the *Json settings types in the `@coderline/alphatab` package HOT 2
- vite-plugin-alphatab-copy: path computing issue on github pages / maybe Ubuntu in general HOT 5
- Add APIs to translate midi ticks to milliseconds
- Improvement: Transposing tabs with string adjustments. HOT 1
- Loud clipping sound when playback ends HOT 6
- Effect Band paddings are kept on line breaks during initial render
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from alphatab.