Media Player denga Ionic Framework dan Cordova

Anda harus memiliki pengetahuan tentang berikut untuk mendapatkan pemahaman yang lebih baik dari kode di bawah ini.

     Angularjs
     Ionic Framework
     Cordova

Desain aplikasi
Aplikasi ini cukup sederhana. Ketika pengguna meluncurkan aplikasi, kami menunjukkan file browser, di mana pengguna dapat menelusuri melalui / nya perangkat nya. Kemudian mereka dapat memilih file audio atau video untuk bermain.

Kami akan menggunakan template menu samping, di mana pemain adalah contoh dari $ ionicModal. modal ini tinggal di latar belakang. Seperti disebutkan sebelumnya, kita akan menggunakan Media API dari cordova untuk mengelola file audio dan Video player Cordova Plugin oleh Dawson Loudon bernama VideoPlayer terinspirasi oleh VideoPlayer Simon MacDonald. Semua plugin ini dilakukan adalah membuat Intent Video baru dan meluncurkannya.

Saya masih mencari solusi yang konsisten tentang cara menerapkan video inline. Jika Anda tahu satu, silakan drop komentar.

Saya telah diuji aplikasi ini pada Android dan bukan pada iOS.
Mengembangkan App

Membuat folder baru bernama mediaPlayerApp. Membuka terminal baru / meminta sini. Kami akan perancah menu samping kerangka dan kemudian membersihkannya sesuai kebutuhan kita. Menjalankan,

ionic start mediaPlayerApp sidemenu

Setelah selesai silahkan arahkan ke folder mediaPlayerApp yang anda buat tadi dengan cara ketik CD mediaPlayerApp tekan enter

Lalu ketikan

ionic serve

Coba anda liat hasil pemanggilan ke browser anda
Hal Pertama yang anda lakukan adalah merubah file Index.html silahkan kopi dan paste seperti kode berikut ke dalam file index.html 

buka www / template / menu.html. Kami akan memperbarui file ini dengan item menu yang lebih sedikit :

Menu




Player


Browse

Kami telah menghapus semua item menu lama dan menambahkan 2 baru. Satu untuk menunjukkan Player, dan satu untuk menelusuri perangkat.

Sekarang, kami akan membersihkan dan mengganti nama file yang dibutuhkan dalam www / template folder

     Rubahlah file login.html ke player.html
     Hapus playlist.html
     Hapus playlists.html
     Hapus search.html
buka www / template / player.html dan informasi sebagai berikut

Player








 {{name || '--'}}
{{path || '--'}}


Please select a Media file to play






 Play


 Pause


 Stop

template ini akan ditampilkan ketika kita init Ionic Modal. Modal ini akan selalu berada di latar belakang saat aplikasi berjalan.

Template ini adalah dasar untuk menunjukkan pemutar audio. Baris 18 terdiri dari logika untuk menunjukkan mencari bar. Baris 22 menunjukkan tombol play, ketika kita telah berhenti video menggunakan tombol on line 25. Kita juga dapat menghentikan media,  bermain kembali sepenuhnya menggunakan tombol Stop.

Seperti yang dapat Anda lihat dari arahan pada tombol ini, mereka mengalami visibilitas berdasarkan keadaan file audio.

Berikutnya, buka www / template / browse.html dan informasi sebagai berikut: 

{{file.name}}
Location : {{file.fullPath}}

Ini adalah template drive yang sangat sederhana dengan file [] dari lingkup. Ketika pengguna meluncurkan halaman browse, kita akan query sistem file dan menampilkan file root. Setelah pengguna mengklik pada folder tertentu, kita query sistem file API lewat di folder saat ini sebagai akar dan mengambil anak-anaknya.

Dan ketika pengguna memilih file, kami memeriksa apakah itu adalah dari jenis audio atau video dan kemudian memainkannya. Lain kita akan menampilkan pesan bahwa kita tidak dapat memutar file yang dipilih.

Ini melengkapi semua template kami. Kami sekarang akan bekerja dengan Layanan Audio. folder terbuka www / js dan membuat file baru bernama audio.service.js dan informasi sebagai berikut.

angular.module('starter.services', [])
.service('AudioSvc', [function() {
var AudioSvc = {
my_media: null,
mediaTimer: null,
playAudio: function(src, cb) {
var self = this;
// stop playing, if playing
self.stopAudio();
self.my_media = new Media(src, onSuccess, onError);
self.my_media.play();
if (self.mediaTimer == null) {
self.mediaTimer = setInterval(function() {
self.my_media.getCurrentPosition(
function(position) {
cb(position, self.my_media.getDuration());
},
function(e) {
console.log("Error getting pos=" + e);
}
);
}, 1000);
}
function onSuccess() {
console.log("playAudio():Audio Success");
}
// onError Callback
//
function onError(error) {
// alert('code: ' + error.code + '\n' +
//     'message: ' + error.message + '\n');
// we forcefully stop
}
},
resumeAudio: function() {
var self = this;
if (self.my_media) {
self.my_media.play();
}
},
pauseAudio: function() {
var self = this;
if (self.my_media) {
self.my_media.pause();
}
},
stopAudio: function() {
var self = this;
if (self.my_media) {
self.my_media.stop();
}
if (self.mediaTimer) {
clearInterval(self.mediaTimer);
self.mediaTimer = null;
}
}
};
return AudioSvc;
}])

Hal untuk melihat

Line 1: Kami telah menciptakan sebuah modul bernama starter.services baru dan menambahkan AudioSvc itu.

Baris 8: Mendefinisikan metode audio yang bermain, yang memainkan src diberikan menggunakan Cordova Media API.

Baris 18: Kami membuat setInterval untuk setiap detik untuk mengeksekusi getCurrentPosition () dan memicu callback. Dengan cara ini kita memperbarui mencari bar dengan total waktu dan waktu yang tersisa.

Baris 46: Logika untuk audio melanjutkan

Baris 52: Logika untuk audio jeda

Baris 58: Logika untuk audio berhenti

Kami akan menyuntikkan layanan ini sebagai ketergantungan di controller kita, di mana kita akan mengelola API di atas didasarkan pada interaksi pengguna.

Selanjutnya, kami akan memperbarui www / js / app.js seperti di bawah ini

 

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform, $rootScope, $ionicLoading) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
$rootScope.toggle = function(text, timeout) {
$rootScope.show(text);
setTimeout(function() {
$rootScope.hide();
}, (timeout || 1000));
};
$rootScope.show = function(text) {
$ionicLoading.show({
template: text
});
};
$rootScope.hide = function() {
$ionicLoading.hide();
};
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.browse', {
url: "/browse",
views: {
'menuContent': {
templateUrl: "templates/browse.html",
controller: 'BrowseCtrl'
}
}
})
$urlRouterProvider.otherwise('/app/browse');
});

Hal untuk melihat

Line 1: Kami membuat modul bernama starter dan menyuntikkan ion, starter.controllers dan starter.services sebagai dependensi.

Baris 4: Di dalam $ ionicPlatform.ready () kita konfigurasi keyboard dan status bar.

Baris 12, 20, 26: Kami sedang membangun sebuah API untuk bekerja dengan API $ ionicLoading.

Baris 32: Kami config router

Akhirnya, pengendali. Terbuka www / js / controller / js dan informasi sebagai berikut

angular.module('starter.controllers', [])
.controller('AppCtrl', ['$rootScope', '$scope', function($rootScope, $scope) {
$scope.player = function() {
$rootScope.player();
}
}])
.controller('BrowseCtrl', ['$window', '$ionicPlatform', '$rootScope', '$scope', '$ionicScrollDelegate', 'AudioSvc', '$ionicModal',
function($window, $ionicPlatform, $rootScope, $scope, $ionicScrollDelegate, AudioSvc, $ionicModal) {
$scope.files = [];
$ionicModal.fromTemplateUrl('templates/player.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
$rootScope.hidePlayer = function() {
$scope.modal.hide();
};
$rootScope.player = function() {
$scope.modal.show();
};
$ionicPlatform.ready(function() {
$rootScope.show('Accessing Filesystem.. Please wait');
$window.requestFileSystem($window.LocalFileSystem.PERSISTENT, 0, function(fs) {
//console.log("fs", fs);
var directoryReader = fs.root.createReader();
directoryReader.readEntries(function(entries) {
var arr = [];
processEntries(entries, arr); // arr is pass by refrence
$scope.files = arr;
$rootScope.hide();
},
function(error) {
console.log(error);
});
},
function(error) {
console.log(error);
});
$scope.showSubDirs = function(file) {
if (file.isDirectory || file.isUpNav) {
if (file.isUpNav) {
processFile(file.nativeURL.replace(file.actualName + '/', ''));
} else {
processFile(file.nativeURL);
}
} else {
if (hasExtension(file.name)) {
if (file.name.indexOf('.mp4') > 0) {
// Stop the audio player before starting the video
$scope.stopAudio();
VideoPlayer.play(file.nativeURL);
} else {
fsResolver(file.nativeURL, function(fs) {
//console.log('fs ', fs);
// Play the selected file
AudioSvc.playAudio(file.nativeURL, function(a, b) {
//console.log(a, b);
$scope.position = Math.ceil(a / b * 100);
if (a < 0) {
$scope.stopAudio();
}
if (!$scope.$$phase) $scope.$apply();
});
$scope.loaded = true;
$scope.isPlaying = true;
$scope.name = file.name;
$scope.path = file.fullPath;
// show the player
$scope.player();
$scope.pauseAudio = function() {
AudioSvc.pauseAudio();
$scope.isPlaying = false;
if (!$scope.$$phase) $scope.$apply();
};
$scope.resumeAudio = function() {
AudioSvc.resumeAudio();
$scope.isPlaying = true;
if (!$scope.$$phase) $scope.$apply();
};
$scope.stopAudio = function() {
AudioSvc.stopAudio();
$scope.loaded = false;
$scope.isPlaying = false;
if (!$scope.$$phase) $scope.$apply();
};
});
}
} else {
$rootScope.toggle('Oops! We cannot play this file :/', 3000);
}
}
}
function fsResolver(url, callback) {
$window.resolveLocalFileSystemURL(url, callback);
}
function processFile(url) {
fsResolver(url, function(fs) {
//console.log(fs);
var directoryReader = fs.createReader();
directoryReader.readEntries(function(entries) {
if (entries.length > 0) {
var arr = [];
// push the path to go one level up
if (fs.fullPath !== '/') {
arr.push({
id: 0,
name: '.. One level up',
actualName: fs.name,
isDirectory: false,
isUpNav: true,
nativeURL: fs.nativeURL,
fullPath: fs.fullPath
});
}
processEntries(entries, arr);
$scope.$apply(function() {
$scope.files = arr;
});
$ionicScrollDelegate.scrollTop();
} else {
$rootScope.toggle(fs.name + ' folder is empty!', 2000);
}
},
function(error) {
console.log(error);
});
});
}
function hasExtension(fileName) {
var exts = ['.mp3', '.m4a', '.ogg', '.mp4', '.aac'];
return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$')).test(fileName);
}
function processEntries(entries, arr) {
for (var i = 0; i < entries.length; i++) {
var e = entries[i];
// do not push/show hidden files or folders
if (e.name.indexOf('.') !== 0) {
arr.push({
id: i + 1,
name: e.name,
isUpNav: false,
isDirectory: e.isDirectory,
nativeURL: e.nativeURL,
fullPath: e.fullPath
});
}
}
return arr;
}
});
}
])

Hal untuk melihat
Baris 13: Ketika aplikasi diluncurkan, para BrowseCtrl dipanggil. Di sini, kita menginisialisasi pemain sebagai modal dari template.
Baris 19, 23: Kami telah menciptakan 2 metode pada $ rootScope yang dapat menampilkan dan menyembunyikan pemain. Ini akan digunakan di seluruh aplikasi. Lihatlah baris 5.
Baris 27: The File System melintasi dimulai dari sini. Kami menunggu perangkat siap.
Baris 30: Kami menyebutnya requestFileSystem () pada jendela dan mendapatkan isi dari direktori root.
Baris 35: Kita membaca semua entri hadir dalam folder root dan memanggil processEntries () untuk membangun sebuah Array item file sistem.
Baris 156: Di sini kita mendapatkan semua entri dan Array referensi. Kami iterate melalui setiap item dan membangun sebuah objek, yang terdiri dari informasi penting saat render. Metode yang sama ini akan dipanggil ketika pernah kita membaca entri dari sistem file dan membangun UI.
Baris 38: Kami menetapkan file Info array ke $ scope.files. Ini update template browse.html untuk mencerminkan file di root.
Baris 49: Akan mendapatkan dipanggil ketika file atau folder nama diklik.
Baris 51: Jika item yang dipilih adalah map, kita memeriksa apakah item tersebut adalah item navigasi. item navigasi yang digunakan untuk memindahkan ke folder satu tingkat atas, yang kita buat bagi pengguna untuk menavigasi. Berdasarkan kondisi ini, kita sebut processFile () dengan URL
Baris 115: Di sini, kita menyelesaikan URL saat ini, dan kemudian mendapatkan anak-anak (file / folder) di dalam jalan itu dan kemudian memperbarui $ scope.files.
Baris 125: Jika folder tidak folder root dan memiliki anak-anak, kami menambahkan baru .. Salah satu tingkat atas item ke bagian atas daftar, menggunakan yang pengguna dapat menavigasi ke folder induk. Anda dapat melihat hal yang sama dalam video demo. Dengan cara ini, kita secara rekursif dapat menunjukkan sistem file ke pengguna.
Baris 57: Jika item yang diklik adalah sebuah file, kita cek itu adalah file atau Video Audio berkas. Jika itu adalah file video, kita akan memanggil VideoPlayer.play () lewat di URL Media. Kami menginstal plugin Video player berikutnya.
Baris 63: Jika itu adalah file audio, kami akan bekerja dengan layanan AudioSvc dan mengelola pemain.
file terlihat cukup rumit tapi logika ini cukup sederhana.

Share on Google Plus

About admin