Created
February 5, 2021 18:26
-
-
Save ricealexander/576c05d0b876f30c4eecd971024ad1f9 to your computer and use it in GitHub Desktop.
A demo, built for Grove, that creates an audio player that can be embedded on websites
This file contains hidden or 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> | |
| <head> | |
| <title>Audio Player</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script> | |
| </head> | |
| <body> | |
| <!-- | |
| This demo is built on top of APlayer | |
| https://github.com/DIYgod/APlayer/tree/master/docs | |
| An IFrame could reference a link structured like: | |
| stlpr.org/audio-player?name=xxx&artist=xxx&url=xxx&cover=xxx | |
| all properties should be URI-Encoded | |
| name: The headline that should be displayed | |
| artist: Attribution; Artist to credit | |
| url: A path or URL to the audio file | |
| cover: A path or URL to an image to display in the player | |
| --> | |
| <figure id="audio-player"></figure> | |
| <script> | |
| // Default Values | |
| var defaultName = ' ' | |
| var defaultArtist = 'St. Louis Public Radio' | |
| var defaultCover = ' ' | |
| // Parse URL Parameters | |
| var queryStrings = (window.location.search).split(/[&?]/) | |
| var URLParameters = {} | |
| for (var index = 0; index < queryStrings.length; index += 1) { | |
| var param = queryStrings[index].split('=') | |
| var property = param[0] | |
| var value = param[1] | |
| if (property) { | |
| URLParameters[property] = decodeURIComponent(value) | |
| } | |
| } | |
| // Initialize Player | |
| var player = new APlayer({ | |
| container: document.querySelector('#audio-player'), | |
| audio: [{ | |
| name: URLParameters.name || defaultName, | |
| artist: URLParameters.artist || defaultArtist, | |
| url: URLParameters.url || '', | |
| cover: URLParameters.cover || defaultCover, | |
| }] | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment