Tutorial 7: Building a GPS-Triggered Audio Player

Follow

Comments

92 comments

  • Avatar
    Aboutyee

    Ben

    Thanks for updating example with the additional stuff from the excellent anymeeting training last week

    Kevin

  • Avatar
    nanda.dias

    Hi Ben! This was super useful for me! I am using this example for my master's thesis experiment! Could you please help explaining how can I add more areas and audios? It's just to name the audio the same name as the areas? Do I have to add more functions or channels? Not sure about the channels as I just want one audio to play at once in each area the listener step into. 

    Thanks a lot!

  • Avatar
    kieron

    Hi,

    You're right, yes. It sounds like you'll only need one channel for the speech as well, so you don't need to add another.

    To add another area, you just add a zone to the Location tab, making sure that it has the same "moveIn" and "moveOut" functions in the properties panel on the right.

    Then, in the Files tab, upload a file of exactly the same name as the zone - upper & lower case matters here.

    If you're using the track names, you'll also need to copy & paste the "nameToAudio" function, like so:

    var nameToAudio = {
        "audio/story1.mp3":"What I had for breakfast",
        "audio/story2.mp3":"What'll have for dinner",
        "audio/story3.mp3":"What'll have for supper"
    };
    In this, you'll need to make sure that each line is ended with a comma, except the last line in the set.
    Hope that helps.
  • Avatar
    nanda.dias

    Thanks a lot! It works :)

  • Avatar
    bob

    great tutorial Thanx.

    The activity log shows "userscript loaded" and "gps enabled" that seems right but i cant move in the map in the preview area to the location in the netherlands. the map shows Bristol... 

    and it seems i cant use the navigation buttons

    any help?

  • Avatar
    bob

    update. I closed my browser and reopened the page and it seems its working now! thnx

  • Avatar
    calviumsoundwalk

    Hi bob,

    Glad it's working OK again now - occasionally the browser gets a little frozen, but usually saving your work and refreshing the browser (or clearing the browser cache in some cases) does solve it. Thanks.

  • Avatar
    bob

    Hi there thank you for your replay

    Sound is working fine, but the "play" and "pause" buttons seems not doing anything. 

    The "tapped" function fas to be empty?

    Any suggestions?

    Thank you

     

  • Avatar
    Aboutyee
    Hi Bob Just a thought. Have you the code names ui.pause and ui.play attached to the 2 buttons? Kevin
  • Avatar
    bob

    Yes  the button Pause has  at the settings tab the name "PAUSE" and goto page is "none"

    At the 010101 tab code name = ui.pause  and the "tapped function" is None

     

    These settings are also used for play with ui.play and button name "PLAY"

     

  • Avatar
    kieron

    Hi bob,

    The tap function should be set to "play" and "pause" respectively. Those instructions seem to be in the code snippet, but not in the tutorial, so we'll get that updated.

    Sorry for the confusion, and thanks for pointing it out.

  • Avatar
    nanda.dias

    Hello guys, I was wondering if there is a way of loading an image in the background of the app interface. One image file for each track loading. It would be the same as the name attributed (as you added in the tutorial already) but with images instead of text. Thank you!!

  • Avatar
    kieron

    Hi nanda.dias,

    There certainly is a way to do this, you'll just need to add an image widget with the codename "ui.image", then add the following code to your app:

    // This function returns the track description if there is one, otherwise returns the name of the audio file.
    function imageFromAudio(audio) {

        // Add "images/" folder to path,
        // remove "audio/" folder from original audio URL,
        // remove the ".mp3" (4 characters) from the end of the audio URL,
        // Add the image suffix to the file name
        return "images/"+ audio.substring( 6, (audio.length - 4) ) +".jpg";
    }

    The process of that is explained in the comments within the code, you'll just need to replace the ".jpg" part if you're using different kinds of images.

    Then, you'll need to add this line into your "updateUI" function (as with the track name examples):

    function updateUI(url, elapsed, amount, paused) {
        if (url) {
            ui.title.text( nameFromAudio(url) );
            ui.image.backgroundImage( imageFromAudio(url) ); // <------------- ADD THIS LINE
            ui.progress.width( amount*280 );
            ui.progress.hidden(false);
        } else {
            ui.progress.hidden(true);
            ui.title.text("(nothing playing)");
        }
    }

    Make sure that your image files are all placed in the "images" folder, and that they have exactly the same names as the location points and audio files - except for the file suffix.

    Hope that helps

  • Avatar
    nanda.dias

    awesome!! I'll test it today!! Thanks!!

  • Avatar
    nnabian

    Hello,

    I have a problem running this test. First and for most when I want to try the app online, the map goes to somewhere in England and I am in Boston. Second, when I zoom to boston and the area that I have created the zoons, the zoons do not show up in the map on the online preview and the files do not play. Any ideas what is wrong?

     

  • Avatar
    nnabian

    I tried to download Safari for windows and the online preview map shows the zones but when I click on the map within a zone, the online  interface for the phone will show this message :

    Error in yourcode

    'unidentified' is not constructor

     

  • Avatar
    kieron

    Hi nnabian,

    If you give me your app ID (the number at the end of the address bar when editing your app), I can take a look at the code to see where the error is coming from

  • Avatar
    kieron

    I've made a copy of the app to test, and it seems to be running as expected - I'm using the most up-to-date version of Google Chrome, which you could try instead? Or, there may be a saving issue - which might be fixed if you try copying your app with the "Save as New App" button from the drop-down menu in the top-right of the toolkit.

    Let me know if either of those works for you

  • Avatar
    egw_giota

    Hi! I would like to know how the audio for a particular zone will be played only in case the users  press a button so  to know where they are and not in any case..

  • Avatar
    kieron

    Hi egw_giota,

    Do you just want the audio to play when a button is tapped? Or are you looking to do something like having the app prompt the user when they enter a zone, before playing the audio?

  • Avatar
    egw_giota

    Thnx for your reply.

    I mean i am the user and i enter the zone and the app goes automatically to the page with details about the zone i entered(including the audio). I want to have a button in the first page and when i press it then get the page and the rest and not from the time that i have opened the app.. i hope i am clear..

  • Avatar
    kieron

    Hi egw_giota,

    The way I understand it, you want to disable any location triggers until a user has tapped a "START" button (or similar). To do this, you should set a global variable at the top of your code, which will remember whether the app has been "started" by the user or not. Then, when you trigger an enter zone function, you can just check whether this variable is true yet. Something along the lines of:

    // Set globals at the start (app not started yet)
    var gAppStarted = 0;


    // Start app button (set the start button to trigger this)
    function startApp(){
        gAppStarted = 1;
    }


    // MoveIn function template:
    function genericMoveIn(loc){
        

        // Only do something if the app has been started
        if(gAppStarted == 1){

            // App started, go to zone page, etc.
            // ...etc.

        }
    }

    You'd replace the inner move in function with whatever actions you want (e.g. navigating to a specific page, playing audio, etc.), but they should go inside the "if" statement - so that they only continue once a user has tapped that start button

    Hope that helps

  • Avatar
    ehadiqatar

    Hi Kieron, 


    I'm very new to all this and have a little background in coding. Can you please explain more on how to have an image show every time you enter a 'Story' zone? I know you provided the code above. But I'm still not sure where I add the following code in my original code?

     

    function imageFromAudio(audio) {
        return "images/"+ audio.substring( 6, (audio.length - 4) ) +".jpg";
    }

    Also, do I remove the original return statement:

     

    function audioFromFeature(feature) {
    return "audio/" + feature.getName() + ".mp3";
    }
    Also, (1) do I put my images in a folder called "Images"?  (2) Do I name my images  'story1' or 'atmos1'?
    Thanks a lot!
  • Avatar
    kieron

    Hi ehadiqatar,

    You can add the function "imageFromAudio" anywhere in your code, as long as it's not inside another function (inside the curly brackets), though I'd recommend keeping all functions in the "bottom half" of your code, and making sure you add comments to keep the code clean and remind you how it all works - which will help you maintain it, and change the code in future if you need to.

    You don't need to remove the "audioFromFeature", as this will break the audio playing aspect of the app.

    Your images should be in a folder called "images" - note that the case of the letters is important here, so "Images" is different to "images".

    Yes to naming your images after the audio region names too.

    Hope that helps

  • Avatar
    linkum

    Hello,

    I am facing issues with the coding. I have uploaded one audio file to test this tutorial and I cant seem to get the audio to play automatically when previewing. My mapping turns out perfect but I am having trouble with the audio.

  • Avatar
    linkum

    Update. 

     

    When I go to preview, click on the zones/story no sound goes on and I get a pop up from the browser that says the following: 

    Please call af.audioChannel.init first

     

    What do I do? 

  • Avatar
    kieron

    Hi linkum,

    Have you included the "function init()" and made sure that it's being called at the very top of the Code tab (i.e. init(); on the first/second line)?

    If so, there may be something else in your code that's stopping those functions running. You can try adding this to the top of the Code tab, on it's own outside any other functions to override that:

    af.audioChannel.init(2);

    Let us know how you get on

  • Avatar
    linkum

    I copied the codes identically as they are written. Should I be adding more stuff?

  • Avatar
    kieron

    No, it should be working straight off - but if you try adding the following code at the top of your Code tab (outside any other functions), does this make a difference?

    af.audioChannel.init(2);

    By getting the error message you're seeing, it suggests that the function that sets everything up isn't being run properly in your app (could be a few reasons for this), but let me know if that resolves that error message.

  • Avatar
    linkum

    Kieron,

     

    adding af.audioChannel.init(2); to the top of the code bar outside of any function gives me a different error bar that says: failed to load atmos2.mp3. (note: I did not put in "init();" at the top because it gives me java script error as mentioned previously)

Please sign in to leave a comment.

Powered by Zendesk