Question

我目前正在使用ngCordova和Ionic构建iOS应用。部分规范包括能够访问/播放存储在应用程序'www'文件夹中的mp3文件。经过实验，我可以从外部URL播放音乐文件，但是当我尝试使用本地存储的mp3时，我遇到了问题。

这是HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="js/ng-cordova.min.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>

  </head>
  <body ng-app="editor">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Editor</h1>
      </ion-header-bar>

      <ion-content ng-controller="MusicController">
        <button class="button" ng-click="play('www/elvis.mp3')">Play</button>
      </ion-content>

    </ion-pane>
  </body>
</html>

这是控制器/应用程序：

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 && 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);

  };

});

当我“cordova build ios”并在xCode的手机上运行时，我收到以下错误：

2015-04-23 11：59：43.619 IonicProject [1487：375698]资源未知 '文件：///private/var/mobile/Containers/Bundle/Application/FB22B00F-9020-46C9-BBA2-674009BD84F7/IonicProject.app/www/elvis.mp3'

Answer 1

您可以在离子中使用iOS应用的直接音频标签，而无需执行这些操作（这些是Android应用程序所必需的）。只需编写以下代码：

HTML代码

<div ng-bind-html="audioCall()"></div>

控制器代码

$scope.audioCall = function () {
    if ($scope.audioUrl) {
        return $sce.trustAsHtml("<audio controls> <source src='" + $scope.audioUrl + "' type='audio/mpeg'/></audio>");
    } else {
        return "";
    }
};

访问存储在ngCordova / ionic iOS app中的mp3文件

1 个答案: