|
| 1 | +--- |
| 2 | +title: jQuery |
| 3 | +--- |
| 4 | + |
| 5 | +> [!WARNING] |
| 6 | +> Listening to alphaTab via DOM events has been deprecated in 1.5 and will be removed in 2.x. |
| 7 | +
|
| 8 | +jQuery used to be, and is still, a big player in the Web Development world. For alphaTab we decided |
| 9 | +that it is not worth to have a dedicated alphaTab jQuery plugin anymore as the AlphaTabApi object already |
| 10 | +provides an easy-to-use interface making jQuery an unnecessary overhead to maintain. |
| 11 | + |
| 12 | +We recommend migrating all codebases to standard modern JavaScript and our API object. |
| 13 | + |
| 14 | +For historical reference this page describes some aspects on how to use the alphaTab jQuery plugin but avoid using it for new developments. |
| 15 | + |
| 16 | + |
| 17 | +To initialize alphaTab on any element use `jQuery('.selector').alphaTab()`. With alphaTab initialized you can either access the API object via `jQuery('.selector').alphaTab('api')` or use |
| 18 | +a subset of the API surface. Parameters and return values can be passed accordingly. For properties, if no value is provided, the current value is loaded, if one is provided it is set. |
| 19 | + |
| 20 | +* `jq.alphaTab('print')` - Delegates to [`api.print()`](/docs/reference/api/print.mdx) |
| 21 | +* `jq.alphaTab('load')` - Delegates to [`api.load()`](/docs/reference/api/load.mdx) |
| 22 | +* `jq.alphaTab('render')` - Delegates to [`api.render()`](/docs/reference/api/render.mdx) |
| 23 | +* `jq.alphaTab('renderScore')` - Delegates to [`api.renderScore()`](/docs/reference/api/renderscore.mdx) |
| 24 | +* `jq.alphaTab('renderTracks')` - Delegates to [`api.renderTracks()`](/docs/reference/api/rendertracks.mdx) |
| 25 | +* `jq.alphaTab('invalidate')` - Delegates to [`api.render()`](/docs/reference/api/render.mdx) |
| 26 | +* `jq.alphaTab('tex')` - Delegates to [`api.tex()`](/docs/reference/api/tex.mdx) |
| 27 | +* `jq.alphaTab('muteTrack')` - Delegates to [`api.changeTrackMute()`](/docs/reference/api/changetrackmute.mdx) |
| 28 | +* `jq.alphaTab('soloTrack')` - Delegates to [`api.changeTrackSolo()`](/docs/reference/api/changetracksolo.mdx) |
| 29 | +* `jq.alphaTab('trackVolume')` - Delegates to [`api.changeTrackVolume()`](/docs/reference/api/changetrackvolume.mdx) |
| 30 | +* `jq.alphaTab('loadSoundFont')` - Delegates to [`api.loadSoundFont()`](/docs/reference/api/loadsoundfont.mdx) |
| 31 | +* `jq.alphaTab('resetSoundFonts')` - Delegates to [`api.resetSoundFonts()`](/docs/reference/api/resetsoundfonts.mdx) |
| 32 | +* `jq.alphaTab('pause')` - Delegates to [`api.pause()`](/docs/reference/api/pause.mdx) |
| 33 | +* `jq.alphaTab('play')` - Delegates to [`api.play()`](/docs/reference/api/play.mdx) |
| 34 | +* `jq.alphaTab('playPause')` - Delegates to [`api.playPause()`](/docs/reference/api/playpause.mdx) |
| 35 | +* `jq.alphaTab('stop')` - Delegates to [`api.stop()`](/docs/reference/api/stop.mdx) |
| 36 | +* `jq.alphaTab('player')` - Delegates to [`api.player`](/docs/reference/api/player.mdx) |
| 37 | +* `jq.alphaTab('isReadyForPlayback')` - Delegates to [`api.isReadyForPlayback`](/docs/reference/api/isreadyforplayback.mdx) |
| 38 | +* `jq.alphaTab('playerState')` - Delegates to [`api.playerState`](/docs/reference/api/playerstate.mdx) |
| 39 | +* `jq.alphaTab('masterVolume')` - Delegates to [`api.masterVolume`](/docs/reference/api/mastervolume.mdx) |
| 40 | +* `jq.alphaTab('metronomeVolume')` - Delegates to [`api.metronomeVolume`](/docs/reference/api/metronomevolume.mdx) |
| 41 | +* `jq.alphaTab('countInVolume')` - Delegates to [`api.countInVolume`](/docs/reference/api/countinvolume.mdx) |
| 42 | +* `jq.alphaTab('midiEventsPlayedFilter')` - Delegates to [`api.midiEventsPlayedFilter`](/docs/reference/api/midieventsplayedfilter.mdx) |
| 43 | +* `jq.alphaTab('playbackSpeed')` - Delegates to [`api.playbackSpeed`](/docs/reference/api/playbackspeed.mdx) |
| 44 | +* `jq.alphaTab('tickPosition')` - Delegates to [`api.tickPosition`](/docs/reference/api/tickposition.mdx) |
| 45 | +* `jq.alphaTab('timePosition')` - Delegates to [`api.timePosition`](/docs/reference/api/timeposition.mdx) |
| 46 | +* `jq.alphaTab('loop')` - Delegates to [`api.isLooping`](/docs/reference/api/islooping.mdx) |
| 47 | +* `jq.alphaTab('renderer')` - Delegates to [`api.renderer`](/docs/reference/api/renderer.mdx) |
| 48 | +* `jq.alphaTab('score')` - Delegates to [`api.score`](/docs/reference/api/score.mdx) |
| 49 | +* `jq.alphaTab('settings')` - Delegates to [`api.settings`](/docs/reference/api/settings.mdx) |
| 50 | +* `jq.alphaTab('tracks')` - Delegates to [`api.tracks`](/docs/reference/api/tracks.mdx) |
| 51 | +* `jq.alphaTab('destroy')` - Delegates to [`api.destroy`](/docs/reference/api/destroy.mdx) |
| 52 | + |
| 53 | +Additionally you can subscribe to alphaTab events via the jQuery event listener mechanisms: |
| 54 | + |
| 55 | +* `jq.on('soundFontLoad')` - Subscribes to [`api.destroy`](/docs/reference/api/soundfontload.mdx) |
| 56 | +* `jq.on('playedBeatChanged')` - Subscribes to [`api.playedBeatChanged`](/docs/reference/api/playedbeatchanged.mdx) |
| 57 | +* `jq.on('activeBeatsChanged')` - Subscribes to [`api.activeBeatsChanged`](/docs/reference/api/activebeatschanged.mdx) |
| 58 | +* `jq.on('beatMouseDown')` - Subscribes to [`api.beatMouseDown`](/docs/reference/api/beatmousedown.mdx) |
| 59 | +* `jq.on('noteMouseDown')` - Subscribes to [`api.noteMouseDown`](/docs/reference/api/notemousedown.mdx) |
| 60 | +* `jq.on('beatMouseMove')` - Subscribes to [`api.beatMouseMove`](/docs/reference/api/beatmousemove.mdx) |
| 61 | +* `jq.on('noteMouseMove')` - Subscribes to [`api.noteMouseMove`](/docs/reference/api/notemousemove.mdx) |
| 62 | +* `jq.on('beatMouseUp')` - Subscribes to [`api.beatMouseUp`](/docs/reference/api/beatmouseup.mdx) |
| 63 | +* `jq.on('noteMouseUp')` - Subscribes to [`api.noteMouseUp`](/docs/reference/api/notemouseup.mdx) |
| 64 | +* `jq.on('scoreLoaded')` - Subscribes to [`api.scoreLoaded`](/docs/reference/api/scoreloaded.mdx) |
| 65 | +* `jq.on('resize')` - Subscribes to [`api.resize`](/docs/reference/api/resize.mdx) |
| 66 | +* `jq.on('renderStarted')` - Subscribes to [`api.renderStarted`](/docs/reference/api/renderstarted.mdx) |
| 67 | +* `jq.on('renderFinished')` - Subscribes to [`api.renderFinished`](/docs/reference/api/renderfinished.mdx) |
| 68 | +* `jq.on('postRenderFinished')` - Subscribes to [`api.postRenderFinished`](/docs/reference/api/postrenderfinished.mdx) |
| 69 | +* `jq.on('error')` - Subscribes to [`api.error`](/docs/reference/api/error.mdx) |
| 70 | +* `jq.on('playerReady')` - Subscribes to [`api.playerReady`](/docs/reference/api/playerready.mdx) |
| 71 | +* `jq.on('playerFinished')` - Subscribes to [`api.playerFinished`](/docs/reference/api/playerfinished.mdx) |
| 72 | +* `jq.on('soundFontLoaded')` - Subscribes to [`api.soundFontLoaded`](/docs/reference/api/soundfontloaded.mdx) |
| 73 | +* `jq.on('midiLoad')` - Subscribes to [`api.midiLoad`](/docs/reference/api/midiload.mdx) |
| 74 | +* `jq.on('midiFileLoaded')` - Subscribes to [`api.midiLoaded`](/docs/reference/api/midiloaded.mdx) |
| 75 | +* `jq.on('playerStateChanged')` - Subscribes to [`api.playerStateChanged`](/docs/reference/api/playerstatechanged.mdx) |
| 76 | +* `jq.on('playerPositionChanged')` - Subscribes to [`api.playerPositionChanged`](/docs/reference/api/playerpositionchanged.mdx) |
| 77 | +* `jq.on('midiEventsPlayed')` - Subscribes to [`api.midiEventsPlayed`](/docs/reference/api/midieventsplayed.mdx) |
| 78 | +* `jq.on('playbackRangeChanged')` - Subscribes to [`api.playbackRangeChanged`](/docs/reference/api/playbackrangechanged.mdx) |
| 79 | +* `jq.on('settingsUpdated')` - Subscribes to [`api.settingsUpdated`](/docs/reference/api/settingsupdated.mdx) |
0 commit comments