3 Replies Latest reply on Nov 22, 2016 8:13 AM by kerrishotts

    Will phonegap developer app not play local audio with the Media plugin?

    JayTeeAitch

      I downloaded the phonegap developer app tests from github, which include some Media plugin tests:

       

      // TEST STREAMING AUDIO PLAYBACK
         //var src = "http://nunzioweb.com/misc/Bon_Jovi-Crush_Mystery_Train.mp3"; // works
         //var src = "http://nunzioweb.com/misc/Bon_Jovi-Crush_Mystery_Train.m3u"; // doesn't work
         //var src = "http://www.wav-sounds.com/cartoon/bugsbunny1.wav"; // works
         //var src = "http://www.angelfire.com/fl5/html-tutorial/a/couldyou.mid"; // doesn't work
         //var src = "MusicSearch/mp3/train.mp3"; // works
         //var src = "bryce.mp3"; // works
         //var src = "/android_asset/www/bryce.mp3"; // works

       

      Now, bryce.mp3 doesn't exist in the www folder but I added an mp3, m4a, wav and ogg, to the www folder, to test on iOS and used src="my_sound.mp3/m4a/etc".

       

      All four tests produce the error:  "Cannot use audio file from resource"

       

      I then found this link on the forums here, which seems to be saying that the audio files aren't deployed to the iPhone/iPad:

      Based upon your code and associated error messages, you are trying to play a file from the app's bundled assets. When your app is being run in the PhoneGap Developer App, however, no mechanism exists to physically push the assets being served into the PG Developer App's bundled assets. As such, the play request fails because the file can't be found.

       

      Have I understood this correctly?

       

      I can't understand why css, js, html and images are deployed but not audio files.

       

      Also, a work around says:

      A temporary workaround to simply verify that you can, indeed, play a media file would be to change the path to something like this:     http://dev-machine-ip-address:pg-serve-port/www/shuffle.mp3

      I tried that but it produced the same error code.

       

      Note that audio files work from external urls, which I'm not interested in, I just need to get a local file working on iOS through the phonegap developer app.

       

      Thanks.

        • 1. Re: Will phonegap developer app not play local audio with the Media plugin?
          kerrishotts Adobe Community Professional

          This is still the case. It's considered an edge case when dealing with the PG Dev app, and I know of no good way around it ATM.

           

          The issue is that the PhoneGap Developer App is itself a PhoneGap App, and app bundles cannot be changed. So when you try to play a media file from what would be your app's bundle if you built the app using the CLI or PGB, you're actually trying to play it from the PG Dev App's bundle -- and of course, your file doesn't exist there, hence the issue.

           

          As to the temporary workaround, I'm not sure if that would work anymore. But it might help to see what you're using to serve the app -- the PhoneGap Desktop app or the CLI ("phonegap serve") and the temp URL you tried.

          • 2. Re: Will phonegap developer app not play local audio with the Media plugin?
            JayTeeAitch Level 1

            Hi,

             

            I've just tried this again:

             

            A temporary workaround to simply verify that you can, indeed, play a media file would be to change the path to something like this:    http://dev-machine-ip-address:pg-serve-port/www/shuffle.mp3

             

            ...but I removed the www and it worked:

             

            http://dev-machine-ip-address:pg-serve-port/shuffle.mp3

             

            Edit: It only works using the CLI, not the desktop app.

             

            Could you tell me what you mean by 'Edge case'? I would have thought that all bundled apps would be designed to use local audio files to speed things up and also ensure the app is always functional offline.

             

            Cheers

            Jules

            • 3. Re: Will phonegap developer app not play local audio with the Media plugin?
              kerrishotts Adobe Community Professional

              The terminology is usually more applicable to testing code, where the code may fail at some extreme value. Some edges are obvious (say, an integer larger than MaxInt), whereas others are not so obvious. I probably use "edge case" a bit too loosely (more accurate would be "boundary case", but "edge case" rolls off the tongue easier). A boundary case is any issue that can arise due to crossing a specific boundary -- say, going from positive to negative, exceeding a certain range, etc. A boundary case isn't necessarily at the extreme end -- for example, it's possible I might have a bug in my code that fails on every multiple of 5, for example.

               

              Now, you're technically crossing a boundary when you're trying to play media from your app's bundle when using the PG Dev App. It's not an expected boundary when you're new to PhoneGap, but if you know how things work underneath the hood, it's an expected boundary, and until someone comes up with a good workaround, it's a boundary that, when crossed, causes failure.

               

              Here's why this is a boundary:

               

              • When you compile your app using PGB or the CLI, the compiler packages up all the assets into your app's bundle.
                • Application bundles are immutable. They cannot be changed.
              • PhoneGap Developer is a PhoneGap app. Its assets have also been packaged into its app bundle.
                • PhoneGap Developer App's bundle is immutable; it cannot be changed. (I should note that this chain of logic applies to native apps as well)
              • Now, you execute "phonegap serve" (or use the desktop app, etc.), and then launch the PG Dev app on your phone and connect to the server.
              • The PG Dev App downloads your app to your device's storage and loads that page into the same container the PG Dev App was just in.
                • Remember, though, the PG Dev App bundle is immutable!
                • So the files are downloaded to another part of the app's sandbox that is changeable.
              • Where your cases fail is where the media plugin tries to load media from the app's bundle. And this is where the boundary case comes in: you are crossing from your perceived app's content into the PG Dev App's bundle.
                • The media plugin fails to find your media in PG Dev App's bundle and fails. This is expected behavior for missing files. I know of no terribly good way to address this issue when running under only the PhoneGap Dev App (short of swizzling some of the methods, but this makes the app way more tightly coupled against the media plugin than it really should be).
              • The failure, to you, is unexpected because from your viewpoint you're trying to load content from your app. But in reality you're trying to load content from the PG Dev app.
              • The fix is simple, in this case: build your app using PGB or the CLI and run the app on the device. This eliminates the boundary and the media plugin will work as expected.

               

              Note that there are lots of these cases with regard to the PhoneGap Developer App. There aren't a lot of great solutions that I can think of that aren't really brittle, unfortunately. Once you understand the above, however, you'll typically be able to spot the boundary between your app's content and the PG Dev App and understand why something fails or does something unexpected.