Constructor
# <Music location history match doesUserGetFeedback exercise showAlert exerciseGenerated />
PropTypes:
| Name | Type | Required | Description | Default |
|---|---|---|---|---|
location |
object | Yes | The current URL data. This is provided by the withRouter function. | |
history |
object | Yes | The history object. This is provided by the withRouter function. | |
match |
object | Yes | The matched URL. This is provided by the withRouter function. | |
doesUserGetFeedback |
bool | Yes | Indicates if the user gets feedback | |
exercise |
shape | No | The requested exercise measures (if an exercise was requested) | |
showAlert |
func | Yes | Shows an alert | |
exerciseGenerated |
func | Yes | Tells Redux that the requested exercise has been generated |
Members
# _alphaTabWrapperRef
A reference to the AlphaTab wrapper element.
Uses a React Ref.
# state
Music component state
Properties:
| Name | Type | Description |
|---|---|---|
isAlphaTabLoading |
boolean | Indicates if AlphaTab is in a loading state |
isPitchDetectionLoading |
boolean | Indicates if pitch detection is in a loading state |
isDataLoading |
boolean | Indicates if data is being downloaded |
currentPart |
object | The currently selected part (track) of the sheet music (e.g. Alto) |
partList |
array | The list of all available parts (tracks) for the sheet music |
isMicrophoneAvailable |
boolean | Indicates if a microphone is available for use |
numberOfMeasures |
string | The number of measures in the sheet music |
currentView |
module:musicViewOptions | The current view that this component is displaying (e.g. performance) |
Methods
# static getDerivedStateFromProps()
Determines the current view based on the current url
# static mapDispatchToProps(dispatch) → {object}
Passes certain Redux actions to the Music component as props.
This function is used only by the react-redux connect function.
Parameters:
| Name | Type | Description |
|---|---|---|
dispatch |
function | The react-redux dispatch function |
Redux actions used in the Music component
object
# static mapStateToProps(state) → {object}
Gets the current state from Redux and passes parts of it to the Music component as props.
This function is used only by the react-redux connect function.
Parameters:
| Name | Type | Description |
|---|---|---|
state |
object | The Redux state |
Redux state properties used in the Music component
object
# alphaTabDidRender()
Updates state when AlphaTab is done rendering
# componentDidMount()
Sets _isMounted to true.
Initializes the AlphaTab API.
Initializes pitch detection.
Prepares the music.
# componentDidUpdate(_, prevState)
Prepares the music again if the current view changed.
Parameters:
| Name | Type | Description |
|---|---|---|
_ |
object | The previous component props |
prevState |
object | The previous component state |
# getNewUrl(newView)
Gets a new URL based on the new view
Parameters:
| Name | Type | Description |
|---|---|---|
newView |
module:musicViewOptions | The view that is being switched to |
# onPartChangeHandler(index, value)
Changes the track number in AlphaTab to the new index.
Updates state to reflect the new part value.
Parameters:
| Name | Type | Description |
|---|---|---|
index |
number | The index of the selected part based on the select input |
value |
string | The value (name) of the selected part |
# prepareForSheetMusicUpdate()
Prepares for a page switch.
Updates AlphaTab and updates state.
# async prepareMusic() → {Promise}
Gets the piece of sheet music.
Renders AlphaTab.
A promise
Promise
# render()
Renders the Music component.
The sketch and AlphaTab are not handled by React, but rather by via direct DOM manipulation.
See the vendors folder for the P5 (sketch) code and the AlphaTab code
# switchToNewMusicPage(newView)
Switches to a new music page.
See options.
Parameters:
| Name | Type | Description |
|---|---|---|
newView |
module:musicViewOptions | The view to switch to |