title: Accessing mp3 files stored inside ngCordova/ionic iOS app
body: <p>I am currently in the process of building an iOS app with ngCordova and Ionic. Part of the specification includes being able to access/play mp3 files stored inside the applications 'www' folder.
  After experimenting I have been able to play a music file from an external URL, however when trying to use a locally stored mp3 I am having problems.</p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;link href="lib/ionic/css/ionic.css" rel="stylesheet"&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
  
      &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
      &lt;script src="js/ng-cordova.min.js"&gt;&lt;/script&gt;
      &lt;script src="cordova.js"&gt;&lt;/script&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
  
    &lt;/head&gt;
    &lt;body ng-app="editor"&gt;
  
      &lt;ion-pane&gt;
        &lt;ion-header-bar class="bar-stable"&gt;
          &lt;h1 class="title"&gt;Editor&lt;/h1&gt;
        &lt;/ion-header-bar&gt;
  
        &lt;ion-content ng-controller="MusicController"&gt;
          &lt;button class="button" ng-click="play('www/elvis.mp3')"&gt;Play&lt;/button&gt;
        &lt;/ion-content&gt;
  
      &lt;/ion-pane&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is the Controller/App:</p>
  
  <pre><code>var editorApp = angular.module('editor', ['ionic', 'ngCordova'])
  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if(window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if(window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })
  
  editorApp.controller("MusicController", function($scope, $cordovaMedia) {
  
    $scope.play = function(src) {
  
      var filePath = cordova.file.applicationDirectory + src;
  
      var iOSPlayOptions = {
        numberOfLoops: 2,
        playAudioWhenScreenIsLocked : false
      };
  
      var media = $cordovaMedia.newMedia(filePath);
      media.play(iOSPlayOptions);
  
    };
  
  });
  </code></pre>
  
  <p>When I "cordova build ios" and run this on a phone in xCode I get the following error:</p>
  
  <blockquote>
    <p>2015-04-23 11:59:43.619 IonicProject[1487:375698] Unknown resource
    'file:///private/var/mobile/Containers/Bundle/Application/FB22B00F-9020-46C9-BBA2-674009BD84F7/IonicProject.app/www/elvis.mp3'</p>
  </blockquote>