Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
embed-examples/external-audio/index.html
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
52 lines (49 sloc)
1.82 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <style type="text/css"> | |
| body { margin: 0; } | |
| #embed-container { width: 100%; height: 750px; margin-top: 40px; } | |
| </style> | |
| <body> | |
| <!-- Example external player--> | |
| <audio id="audio" controls><source src="example.mp3" type="audio/mpeg"></audio> | |
| <!-- Flat Embed container --> | |
| <div id="embed-container"></div> | |
| <script src="https://prod.flat-cdn.com/embed-js/v1.4.0/embed.min.js"></script> | |
| <script> | |
| const container = document.getElementById('embed-container'); | |
| const audio = document.getElementById('audio'); | |
| const appId = '59e7684b476cba39490801c2'; // Use your own App Id here | |
| const embed = new Flat.Embed('embed-container', { | |
| embedParams: { | |
| appId, | |
| layout: 'track', | |
| controlsDisplay: false, | |
| } | |
| }); | |
| fetch('./example.xml') | |
| .then(response => response.text()) | |
| .then(xml => embed.loadMusicXML(xml)) | |
| .then(() => embed.setTrack({ | |
| id: 'external-1', | |
| type: 'external', | |
| totalTime: 276, | |
| synchronizationPoints: [ | |
| { type: 'measure', time: 0, location: { measureIdx: 0 }}, | |
| { type: 'end', time: 19 } | |
| ], | |
| })) | |
| .then(() => embed.useTrack({ id: 'external-1' })) | |
| .then(() => console.log('Embed loaded')) | |
| .catch(error => console.error(error)); | |
| // Optional: Events from Flat embed to <audio>, can be useful if you want to keep Flat's controls displayed | |
| // embed.on('play', () => audio.play()); | |
| // embed.on('pause', () => audio.pause()); | |
| // embed.on('stop', () => audio.pause()); | |
| // Events from <audio> sent to Flat embed | |
| audio.addEventListener('timeupdate', () => embed.call('seekTrackTo', { time: audio.currentTime })); | |
| audio.addEventListener('playing', () => embed.play()); | |
| audio.addEventListener('pause', () => embed.stop()); | |
| </script> | |
| </body> | |
| </html> |