rakannimer / react-orchestra Goto Github PK
View Code? Open in Web Editor NEWA declarative toolbox to build interactive musical instruments on web and mobile.
Home Page: http://react-orchestra.surge.sh/
A declarative toolbox to build interactive musical instruments on web and mobile.
Home Page: http://react-orchestra.surge.sh/
e.g.:
/process.env.NODE_ENV !== "production" ? MidiTrack.propTypes = {
notes: _react.PropTypes.arrayOf(_react.PropTypes.shape({
noteNumber: _react.PropTypes.number,
noteName: _react.PropTypes.string,
startTimeInMS: _react.PropTypes.number,
durationInMS: _react.PropTypes.number,
endTimeInMS: _react.PropTypes.number,
instrumentName: _react.PropTypes.string,
deltaTime: _react.PropTypes.number,
msPerTick: _react.PropTypes.number
}))
} : void 0;/
Hi,
I have not been able to make react orchestra works on RN 0.58 57 and 56 from fresh react-native init install and then I follow the steps on Getting started.
Have react-orchestra been tested on those version ?
Would it be possible to have an updated version of your demo git ?
Regards,
Hi,
I'm a beginner with React Native and React Orchestra. I followed every steps for the installation, but I must have missed something because I can't get rid of this error :
with this code, that i took from the native demo example :
import React from 'react';
import { View, Text } from 'react-native';
import { NoteFactory } from 'react-orchestra/native';
const renderNote = (instrumentName, noteName) =>{
// console.warn('rendering '+instrumentName, noteName);
return (<View><Text> I am a note : {instrumentName} {noteName} You can click me ! </Text></View>);
}
class NoteFactoryExample extends React.Component {
render() {
// console.warn(JSON.stringify(Object.keys(a), 2, 2));
return (
<NoteFactory
type="scale"
scaleName="ionian"
noteName="C"
instrumentName="acoustic_grand_piano"
startOctave="3"
octaveCount="1"
renderNote={renderNote}
/>
);
}
}
export default NoteFactoryExample;
If you have any hint ?
Sorry if this is a silly question :/
Regards
Hello!
Is react-orchestra capable of playing flat or sharp notes? I specified in my code Note name={'C#'}
but it didn't work. I also tried spelling out the word "sharp" like this Note -name={'C-Sharp'}
but to no avail. Does anyone know how to play sharps or flats on react-orchestra?
When I build my own version of this repo, everything works fine. I got it working trough docker on a windows machine. However, when I change the url to the .mid file, it fails. I'm not doing anything different, I just changed the url and allowed cross origin on the host. Perhaps you can help me out with this? It could be that something went wrong with my build.
MidiIO.js:111Uncaught (in promise) TypeError: Cannot read property 'filter' of undefined
at http://localhost/demo.5a7d88bb.js:7:17557
at Array.map (native)
at Function.ROpp.e.getAllTracks (http://localhost/demo.5a7d88bb.js:7:17149)
at http://localhost/demo.5a7d88bb.js:7:21947
(anonymous) @ MidiIO.js:111
ROpp.e.getAllTracks @ MidiIO.js:89
(anonymous) @ MidiIO.js:330
Which points to line:
noteOnValid: indexedTrack.channel_noteOn.filter(event => event.deltaTime > 0),
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.