@ClifSteenk wrote:
Hi,I'm busy with a course on the Ionic Framework and while testing one of the apps created I noticed that when I run the app in the browser and in Genymotion it Displays and works perfectly WITH the sound,which is triggered when click on the relevant animal:
However when I test it using the Iionic View App some of the elements aren't there(The move and delete sounds buttons in the header) and when I tap on an animal there is no sound, and the same happens when I test the app on my device using the apk:
here's the code index.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"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script> </head> <body ng-app="soundboard"> <ion-pane ng-controller="SoundBoardCtrl"> <ion-header-bar class="bar-energized" align-title="center"> <h1 class="title">Soundboard</h1> <div class="buttons"> <button class="button" ng-click="model.showMove=!model.showMove;model.showDelete=false"><!--used to toggle the visibility of the move icon --> Move</button> </div> <div class="buttons"> <button class="button button-icon ion-android-remove-circle" ng-click="model.showDelete=!model.showDelete;model.showMove=false;"><!--used to toggle the visibility of the delete/remove icon --> </button> </div> </ion-header-bar> <ion-content> <ion-list show-delete="model.showDelete" show-reorder="model.showMove"> <!-- Code Goes here --> <ion-item class="item-avatar item-icon-right item-remove-animate" ng-repeat="sound in model.sounds" ng-click="play(sound)"> <img ng-src="{{sound.image}}"> <!--don't forget the icon class before the actual icon--> <h2>{{sound.title}}</h2> <p>{{sound.desc}}</p> <i class="icon ion-volume-high"></i><!--the volume icon--> <!--android remove icon(below)--> <ion-delete-button class="ion-android-remove-circle" ng-click="deleteSound($index)"> </ion-delete-button> <!--the move icon(below), in this case, but in reality it's actually the nav icon!--> <ion-reorder-button class="ion-navicon" on-reorder="moveSound(sound,$fromIndex,$toIndex)"> <!--on-reorder attribute or directive is specific to the ionic framework you can choose what you want to happen when the user clicks on the move icon in our case if we're just moving the item from it's old index to a new index--> </ion-reorder-button> </ion-item> </ion-list> </ion-content> </ion-pane> </body> </html> app.js: var app = angular.module('soundboard', ['ionic']); app.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(); } }); }); app.controller('SoundBoardCtrl', function ($scope,$window) { $scope.media = null; $scope.model = { showDelete: false, showMove: false, sounds: [ { 'title': 'Cow', 'image': 'img/animals/cow-icon.png', 'desc': 'Mooo', 'file': '/sounds/cow.mp3' }, { 'title': 'Dolphin', 'image': 'img/animals/dolphin-icon.png', 'desc': 'Whistle', 'file': '/sounds/dolphin.mp3' }, { 'title': 'Frog', 'image': 'img/animals/frog-icon.png', 'desc': 'Croak', 'file': '/sounds/frog.mp3' }, { 'title': 'Bird', 'image': 'img/animals/bird-icon.png', 'desc': 'Chirp', 'file': '/sounds/bird.mp3' }, { 'title': 'Pig', 'image': 'img/animals/pig-icon.png', 'desc': 'Oink', 'file': '/sounds/pig.mp3' }, { 'title': 'Dog', 'image': 'img/animals/puppy-icon.png', 'desc': 'Bark', 'file': '/sounds/dog.mp3' }, { 'title': 'Cat', 'image': 'img/animals/black-cat-icon.png', 'desc': 'Meow', 'file': '/sounds/cat.mp3' } ] }; /** Javascript splice function: array.splice(index,howmany,item1,.....,itemX) index:index of the item you want to add or remove how many:how items you want to remove, if you plan on removing items item-itemX:the items you want to add to the array */ $scope.deleteSound = function($index){ $scope.model.sounds.splice($index,1);//removes the sound when the user clicks on it }; $scope.moveSound = function(sound,from,to){ $scope.model.sounds.splice(from,1);//removes the sound from it's current index in the array $scope.model.sounds.splice(to,0,sound);//moves the sound to it's new index in the array }; $scope.play = function(sound){ if($scope.media){//checks if a media model is active $scope.media.pause(); }; //check for the cordova object on the global window object //will only be present if we're running the app on a device if($window.cordova){ ionic.Platform.ready(function()//check if everything has been loaded { var src = sound.file; if(ionic.Platform.is('android')){ src = '/android_asset/www'+src; } //The cordova media plugin adds an object to the global window object //called media, and we use that to interact with the media plugin $scope.media = new $window.Media(src); $scope.media.play(); }); } else { $scope.media = new Audio();//new HTML5 Audio Object $scope.media.src = sound.file;//referencing the audio file $scope.media.load();//loading the audio file $scope.media.play();//and finally playing the audio file } }; });Here's a link to the project if you'd like to download the project.
Posts: 1
Participants: 1