我目前正在使用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'

最佳答案

您可以在ionic中使用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 "";
    }
};

关于ios - 访问ngCordova/ionic iOS应用中存储的mp3文件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29821731/

10-12 00:31
查看更多