AmplitudeJS Audio Player and json

Question

I am using the open source AmplitudeJS Audio Player in my app. I've been fooling around in an attempt to learn the Amplitude environment. AmplitudeJS includes its json list at the end of the HTML page. I'd like to place my json file in a separate file and call it by including it in the HTML head.

What I don't understand is how to get the Amplitude webpage to recognize the external json file. Amplitude json must be called using Amplitude.init.

This is what the json file looks like when included at the bottom of the Amplitude web page. I've tried referencing it from the head after creating the json file where I use Amplitude.init but it doesn't work.

<script type="text/javascript">
Amplitude.init({
"songs": [
{
"name": "Song 1",
"artist": "artist 1",
"album": "Album 1",
"url": "audio/song1.m4a",
"cover_art_url": "image1.png"
},
{
"name": "Song 2",
"artist": "artist 2",
"album": "Album 2",
"url": "audio/song2.m4a",
"cover_art_url": "image2.png"
},
{
"name": "Song 3",
"artist": "artist 3",
"album": "Album 3",
"url": "audio/song3.m4a",
"cover_art_url": "image3.png"
}] });</script>

Please be kind. I'm no coding all star.

TIA -Rachel

It sounds like you want to load an external JSON file? There are some good threads on that [like this one](https://stackoverflow.com/questions/19706046/how-to-read-an-external-local-json-file-in-javascript). — uncleoptimus, Apr 04 '18 at 00:06
@uncleoptimus Thanks for your response. I managed to get the external file to be recognized. Just needed to place the script in a different location of the page. (See my answer below) So far, so good. :-) — user1204493, Apr 04 '18 at 02:00

score 0 · Answer 1 · answered Apr 04 '18 at 01:58

0

For anyone who is using AmplitudeJS and would like a separate json file, this is what worked for me:

I created a json file that looked like this:

Amplitude.init({
"songs": [
{
"name": "Song 1",
"artist": "artist 1",
"album": "Album 1",
"url": "audio/song1.m4a",
"cover_art_url": "image1.png"
},
{
"name": "Song 2",
"artist": "artist 2",
"album": "Album 2",
"url": "audio/song2.m4a",
"cover_art_url": "image2.png"
},
{.....}
}] });

Even though my IDE (Brackets) showed an error for Amplitude.init({... , the external file worked just fine as long as I placed the script tag after the tag in the Amplitude HTML document.

Placing the script tag within the header tag didn't work for me.

answered Apr 04 '18 at 01:58

user1204493

184
1
4
19

Glad you found a workaround! But shouldn't the data file just define the data object, without the `Amplitude` reference? I.e. http://www.askyb.com/javascript/load-json-file-locally-by-js-without-jquery/ ... and then just make sure your script (where `Amplitude.init()` gets invoked) occurs *after* loading the AmplitudeJS script – uncleoptimus Apr 04 '18 at 02:05
@uncleoptimus Thank you again. I will look at your suggestion and try to figure it out. I'm not much of a coder. I sure appreciate the help. – user1204493 Apr 04 '18 at 18:15

score 0 · Answer 2 · answered Jun 29 '18 at 20:22

0

You could make a JSON file of songs and then include it in the head of your HTML page. As long as you have a variable in there you could initialize Amplitude closer to the end of your HTML page with the variable as the songs like this:

Amplitude.init({
    "songs": yourVariableName
});

answered Jun 29 '18 at 20:22

Dan Pastori

51
1
2

Thank you Dan. Amplitude is a wonderful program. I appreciate your effort and support for open source. – user1204493 Jul 03 '18 at 20:22

score 0 · Answer 3 · answered Jun 13 '19 at 12:05

Rather than dynamically creating the javascript file, simply create the JSON for the songs. In fact, it doesn't even need to be the exact format for the song list. For example, in my feed I the variable name is s3Url (since the audio is stored on Amazon's s3).

Here's what I use, you'll need jQuery to fetch the JSON.

let songs = [];
$.get("/my-songs.json", function(data) {
    data.forEach(function (d) {
        let song = {
            artist: d.musician,
            album: d.album,
            name: d.song_name,
            cover_art_url: "https://dummyimage.com/300x200/000/fff&text=" + d.song_name,
            url: d.s3Url
        };
        songs.push(song);
    });
    Amplitude.init({
        "songs": songs
    });
});

AmplitudeJS Audio Player and json

3 Answers3