i using phonegap create music/sound player application android. using html5 css , angular.js.
i have details of sounds in content management system on web server ideally use php within app retrieve information cms , create json file cms content angular can work on client side. started off trying make php file work within app having trouble. have hard coded json string php file testing purposes (instead of doing sql statement retrieve info database). using angular's $http method json data "echod" php file.
this working perfect when testing on computer when test app on phone after building phonegap not getting json data php file.
i have read can use php within phonegap. new both phonegap , angular maybe there obvious doing wrong.
also better use local database on device?
sounds.php:
<?php header("access-control-allow-origin: *"); header("content-type: application/json; charset=utf-8"); $output = '{"sounds": [{"title": "alarm", "soundtype": "sound effect", "index": "0", "mp3": "sounds/0001_alarm_high_squeak.mp3"},'; $output .= '{"title": "alarm 2", "soundtype": "sound effect", "index": "1", "mp3": "sounds/0001_alarm_high_squeak.mp3"},'; $output .= '{"title": "alarm 2", "soundtype": "sound effect", "index": "1", "mp3": "sounds/0001_alarm_high_squeak.mp3"}]}'; echo $output; ?> controller.js:
//create module using angular objects module() method var myapp = angular.module("mymodule", []); myapp.factory("soundsfactory", function($http){ return { getsounds: function(callback){ $http.get('http://www.example.com/iwp/my_app_php/sounds.php').success(callback); } }; }); //create , register our controller module myapp.controller("workshopcontroller", function($scope, soundsfactory){ /*var sounds = [{title: 'alarm', soundtype: 'sound effect', index: '0', mp3: 'sounds/0001_alarm_high_squeak.mp3'}, {title: 'alarm 2', soundtype: 'sound effect', index: '1', mp3: 'sounds/0002_alarm_high.mp3'}, {title: 'mumble', soundtype: 'voice', index: '2', mp3: 'sounds/0003_alarm_low.mp3'}]; */ var player = document.getelementbyid('audio_player'); $scope.player = player; soundsfactory.getsounds(function(results){ $scope.sounds = results.sounds; //alert($scope.sounds); }); $scope.playmusic = function($index){ var mp3 = $scope.sounds[$index].mp3; $scope.selectedindex = $index; $scope.player.setattribute('src', mp3); //load player after inserting new mp3 file $scope.player.load(); $scope.player.play(); } }); html:
<div class="container" data-ng-controller="workshopcontroller"> <div> <ul> <!--want add class 'on' when user selects item can style selected item--> <li id='item_number0' class='item_row' ng-class="{'on': $index == selectedindex}" data-ng-repeat="currentsound in sounds" data-ng-click="playmusic($index)"> <span id='select_item{{currentsound.index}}'> <span class='item-column column-xxs-1'><i class='fa fa-play'></i></span> <span class='item-column column-xxs-5'> <span class='item_col_split'>{{currentsound.title}}</span> <span class='item_col_split'>{{currentsound.soundtype}}</span> </span> <span class='item-column column-xxs-2'>{{currentsound.index}}</span> </span> </li> </ul> </div> <audio id ='audio_player'> <source id='src_mp3' type='audio/mp3' src=''/> <source id='src_ogg' type='audio/ogg' src=''/> <object id='audio_object' type='audio/x-mpeg' width='200px' height='45px' > <param id = 'param_src' name='src'/> <param id = 'param_src' name='src'/> <param name='autoplay' value='false' /> <param name='autostart' value='false' /> </object> </audio> </div><!--/controller-->
