2015-04-23 4 views
0

Я в настоящее время находится в процессе создания приложения iOS с ngCordova и Ionic. Часть спецификации включает в себя возможность доступа/воспроизведения mp3-файлов, хранящихся в папке «www» приложений. После экспериментов я смог воспроизвести музыкальный файл с внешнего URL-адреса, однако при попытке использовать локально сохраненный mp3 у меня возникают проблемы.Доступ к mp3-файлам, хранящимся в приложении ngCordova/ionic iOS

Вот 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> 

А вот контроллер/App:

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 построить ИСН" и запустить этот по телефону в Xcode я получаю следующее ошибка:

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'

+0

DonT добавить WWW. просто добавьте play ('elvis.mp3') –

+0

попробовал это и все еще получал ту же ошибку: 2015-04-23 12: 22: 50.374 IonicProject [1516: 381092] Неизвестный ресурс 'файл: /// private/var/mobile/Контейнеры/Bundle/Application/D72C701B-50ED-48C9-99CC-B3D21D35A2C7/IonicProject.app/elvis.mp3 ' – PhilBrockwell

+0

Прежде всего, используйте $ location для поиска текущего местоположения и на основе текущего url, изменения в локальном аудио src. Но вы можете использовать приведенный ниже код для воспроизведения аудио в приложении iOS. Также вы можете воспроизводить/приостанавливать звуковой тег без необходимости добавлять к нему несколько кнопок. –

ответ

1

Вы можете использовать прямой тэг аудио для IOS приложения в ионной и нет необходимости делать эти вещи (это Requ ired для Android-приложения). Просто напишите следующий код:

HTML код

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

Controller Код

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

Вы можете использовать этот для локальных и внешних URL-адресов аудио –

Смежные вопросы