Bangun AudioPlayer dengan PhoneGap: Logika Aplikasi

() translation by (you can also view the original English article)

Ini adalah bagian kedua dari seri tentang Audero Audio Player. Dalam artikel ini, kita akan membuat logika bisnis pemain kita. Saya juga akan menjelaskan beberapa API Cordova yang diperkenalkan di artikel sebelumnya.

Ikhtisar Seri

Menciptakan Player

Di bagian ini, saya akan menunjukkan kepada Anda kelas yang disebut Player, yang memungkinkan kami bermain, berhenti, mundur, dan maju cepat. Kelas sangat bergantung pada API Media; tanpa metode, pemain kami akan benar-benar tidak berguna. Selain API Media, kelas ini mengambil keuntungan dari metode alert() pada Pemberitahuan API. Tampilan lansiran bervariasi di antara platform. Sebagian besar sistem operasi yang didukung menggunakan kotak dialog asli tetapi yang lain, seperti Bada 2.X, menggunakan fungsi alert () klasik browser, yang kurang dapat disesuaikan. Metode sebelumnya menerima hingga empat parameter:

message: String yang berisi pesan untuk ditampilkan
alertCallback: Callback untuk memanggil ketika dialog peringatan ditutup
title: Judul dialog (nilai defaultnya adalah "Alert")
buttonName: Teks tombol yang termasuk dalam dialog (nilai default adalah "OK")

Ingatlah bahwa Windows Phone 7 mengabaikan nama tombol dan selalu menggunakan default. Windows Phone 7 dan 8 tidak memiliki peringatan browser built-in, jadi jika Anda ingin menggunakan alert ('message') ;, Anda harus menetapkan window.alert = navigator.notification.alert.

Sekarang setelah saya menjelaskan API yang digunakan oleh Player, kita dapat melihat cara pembuatannya. Kami memiliki tiga properti:

media: referensi ke objek suara saat ini
mediaTimer: yang akan berisi ID interval unik yang dibuat menggunakan fungsi setInterval () yang akan kita lewati ke clearInterval () untuk menghentikan pengatur suara
isPlaying: variabel yang menentukan apakah suara saat ini diputar atau tidak. Selain properti, kelas memiliki beberapa metode.

Metode initMedia () menginisialisasi properti media dengan objek Media yang mewakili suara yang dipilih oleh pengguna. Yang terakhir ini diberitahukan menggunakan API Pemberitahuan jika terjadi kesalahan. Tujuan dari metode playPause, stop (), dan seekPosition () harus jelas, jadi saya akan melanjutkan. Metode resetLayout () dan changePlayButton () sangat sederhana. Mereka digunakan untuk mengatur ulang atau memperbarui tata letak pemain sesuai dengan tindakan yang dilakukan oleh pengguna. Metode terakhir yang tersisa adalah updateSliderPosition (), yang mirip dengan penggeser waktu. Yang terakhir memiliki nol (awal slider) sebagai nilai default untuk posisi saat ini, atur menggunakan atribut value = "0". Ini harus diperbarui secara bersamaan saat suara dimainkan untuk diberikan kepada pengguna umpan balik visual mengenai waktu pemutaran yang telah berlalu.

Kami telah menemukan semua detail kelas ini, jadi di sini adalah kode sumber file:


var Player = {
   media: null,
   mediaTimer: null,
   isPlaying: false,
   initMedia: function(path) {
      Player.media = new Media(
         path,
         function() {
            console.log('Media file read succesfully');
            if (Player.media !== null)
               Player.media.release();
            Player.resetLayout();
         },
         function(error) {
            navigator.notification.alert(
               'Unable to read the media file.',
               function(){},
               'Error'
            );
            Player.changePlayButton('play');
            console.log('Unable to read the media file (Code): ' + error.code);
         }
      );
   },
   playPause: function(path) {
      if (Player.media === null)
         Player.initMedia(path);

      if (Player.isPlaying === false)
      {
         Player.media.play();
         Player.mediaTimer = setInterval(
            function() {
               Player.media.getCurrentPosition(
                  function(position) {
                     if (position > -1)
                     {
                        $('#media-played').text(Utility.formatTime(position));
                        Player.updateSliderPosition(position);
                     }
                  },
                  function(error) {
                     console.log('Unable to retrieve media position: ' + error.code);
                     $('#media-played').text(Utility.formatTime(0));
                  }
               );
            },
            1000
         );
         var counter = 0;
         var timerDuration = setInterval(
            function() {
               counter++;
               if (counter > 20)
                  clearInterval(timerDuration);

               var duration = Player.media.getDuration();
               if (duration > -1)
               {
                  clearInterval(timerDuration);
                  $('#media-duration').text(Utility.formatTime(duration));
                  $('#time-slider').attr('max', Math.round(duration));
                  $('#time-slider').slider('refresh');
               }
               else
                  $('#media-duration').text('Unknown');
            },
            100
         );

         Player.changePlayButton('pause');
      }
      else
      {
         Player.media.pause();
         clearInterval(Player.mediaTimer);
         Player.changePlayButton('play');
      }
      Player.isPlaying = !Player.isPlaying;
   },
   stop: function() {
      if (Player.media !== null)
      {
         Player.media.stop();
         Player.media.release();
      }
      clearInterval(Player.mediaTimer);
      Player.media = null;
      Player.isPlaying = false;
      Player.resetLayout();
   },
   resetLayout: function() {
      $('#media-played').text(Utility.formatTime(0));
      Player.changePlayButton('play');
      Player.updateSliderPosition(0);
   },
   updateSliderPosition: function(seconds) {
      var $slider = $('#time-slider');

      if (seconds < $slider.attr('min'))
         $slider.val($slider.attr('min'));
      else if (seconds > $slider.attr('max'))
         $slider.val($slider.attr('max'));
      else
         $slider.val(Math.round(seconds));

      $slider.slider('refresh');
   },
   seekPosition: function(seconds) {
      if (Player.media === null)
         return;

      Player.media.seekTo(seconds * 1000);
      Player.updateSliderPosition(seconds);
   },
   changePlayButton: function(imageName) {
      var background = $('#player-play')
      .css('background-image')
      .replace('url(', '')
      .replace(')', '');

      $('#player-play').css(
         'background-image',
         'url(' + background.replace(/images\/.*\.png$/, 'images/' + imageName + '.png') + ')'
      );
   }
};

Mengelola File Audio

Bagian ini mengilustrasikan kelas AppFile yang akan digunakan untuk membuat, menghapus, dan memuat suara menggunakan Web Storage API. API ini memiliki dua area, Sesi dan Lokal, tetapi Cordova menggunakan yang terakhir. Semua suara disimpan dalam item yang berjudul "file" seperti yang Anda lihat dengan melihat properti _tableName.

Harap perhatikan bahwa API ini hanya dapat menyimpan data dasar. Oleh karena itu, agar sesuai dengan kebutuhan kita untuk menyimpan objek, kita akan menggunakan format JSON. JavaScript memiliki kelas untuk menangani format yang disebut JSON ini. Ia menggunakan metode parse() untuk mem-parse string dan membuat ulang data yang sesuai, dan stringify() untuk mengonversi objek dalam string. Sebagai catatan akhir, saya tidak akan menggunakan notasi titik dari API karena Windows Phone 7 tidak mendukungnya, jadi kami akan menggunakan metode setItem() dan getItem () untuk memastikan kompatibilitas untuk semua perangkat.

Sekarang setelah Anda memiliki gambaran tentang bagaimana kami akan menyimpan data, mari kita bicara tentang data yang perlu kita simpan. Satu-satunya informasi yang kita butuhkan untuk setiap suara yang ditemukan adalah nama (name properti) dan jalur absolut (properti fullPath). Kelas AppFile juga memiliki "konstan", disebut EXTENSIONS, di mana kami akan mengatur ekstensi yang akan diuji terhadap setiap file. Jika mereka cocok, file akan dikumpulkan oleh aplikasi. Kami memiliki metode untuk menambahkan file (addFile()), salah satu metode untuk menghapus file (deleteFile()), salah satu metode yang menghapus seluruh database (deleteFiles()), dan, terakhir, dua metode yang mengambil file dari database: getAppFiles() untuk mengambil semua file, dan getAppFile() untuk mengambil satu saja. Kelas ini juga memiliki empat metode perbandingan, dua statis (compare() dan compareIgnoreCase()) dan dua non-statis (compareTo() dan compareToIgnoreCase()). Metode terakhir adalah yang digunakan untuk mengambil indeks file tertentu, getIndex(). Kelas AppFile memungkinkan Anda untuk melakukan semua operasi dasar yang mungkin Anda butuhkan.

Kode yang mengimplementasikan apa yang telah kita bahas dapat dibaca di sini:


function AppFile(name, fullPath)
{
   var _db = window.localStorage;
   var _tableName = 'files';

   this.name = name;
   this.fullPath = fullPath;

   this.save = function(files)
   {
      _db.setItem(_tableName, JSON.stringify(files));
   }

   this.load = function()
   {
      return JSON.parse(_db.getItem(_tableName));
   }
}

AppFile.prototype.addFile = function()
{
   var index = AppFile.getIndex(this.fullPath);
   var files = AppFile.getAppFiles();

   if (index === false)
      files.push(this);
   else
      files[index] = this;

   this.save(files);
};

AppFile.prototype.deleteFile = function()
{
   var index = AppFile.getIndex(this.fullPath);
   var files = AppFile.getAppFiles();
   if (index !== false)
   {
      files.splice(index, 1);
      this.save(files);
   }

   return files;
};

AppFile.prototype.compareTo = function(other)
{
   return AppFile.compare(this, other);
};

AppFile.prototype.compareToIgnoreCase = function(other)
{
   return AppFile.compareIgnoreCase(this, other);
};

AppFile.EXTENSIONS = ['.mp3', '.wav', '.m4a'];

AppFile.compare = function(appFile, other)
{
   if (other == null)
      return 1;
   else if (appFile == null)
      return -1;

   return appFile.name.localeCompare(other.name);
};

AppFile.compareIgnoreCase = function(appFile, other)
{
   if (other == null)
      return 1;
   else if (appFile == null)
      return -1;

   return appFile.name.toUpperCase().localeCompare(other.name.toUpperCase());
};

AppFile.getAppFiles = function()
{
   var files = new AppFile().load();
   return (files === null) ? [] : files;
};

AppFile.getAppFile = function(path)
{
   var index = AppFile.getIndex(path);
   if (index === false)
      return null;
   else
   {
      var file = AppFile.getAppFiles()[index];
      return new AppFile(file.name, file.fullPath);
   }
};

AppFile.getIndex = function(path)
{
   var files = AppFile.getAppFiles();
   for(var i = 0; i < files.length; i++)
   {
      if (files[i].fullPath.toUpperCase() === path.toUpperCase())
         return i;
   }

   return false;
};

AppFile.deleteFiles = function()
{
   new AppFile().save([]);
};

Kelas Utilitas

File utility.js sangat singkat dan mudah dimengerti. Hanya memiliki dua metode. Satu digunakan untuk mengonversi milidetik menjadi string berformat yang akan ditampilkan di pemutar, sementara yang lain adalah implementasi JavaScript dari metode Java yang terkenal endsWith.

Inilah sumbernya:


var Utility = {
   formatTime: function(milliseconds) {
      if (milliseconds <= 0)
         return '00:00';

      var seconds = Math.round(milliseconds);
      var minutes = Math.floor(seconds / 60);
      if (minutes < 10)
         minutes = '0' + minutes;

      seconds = seconds % 60;
      if (seconds < 10)
         seconds = '0' + seconds;

      return minutes + ':' + seconds;
   },
   endsWith: function(string, suffix) {
      return string.indexOf(suffix, string.length - suffix.length) !== -1;
   }
};

Menempatkannya Semua Bersama

Bagian ini membahas file JavaScript terakhir dari proyek, application.js, yang berisi kelas Aplikasi. Tujuannya adalah melampirkan acara ke elemen halaman aplikasi. Kejadian-kejadian itu akan memanfaatkan kelas yang telah kita lihat sejauh ini dan memungkinkan pemain untuk bekerja dengan benar.

Kode fungsi yang diilustrasikan tercantum di bawah ini:


var Application = {
   initApplication: function() {
      $(document).on(
         'pageinit',
         '#files-list-page',
         function()
         {
            Application.initFilesListPage();
         }
      );
      $(document).on(
         'pageinit',
         '#aurelio-page',
         function()
         {
            Application.openLinksInApp();
         }
      );
      $(document).on(
         'pagechange',
         function(event, properties)
         {
            if (properties.absUrl === $.mobile.path.makeUrlAbsolute('player.html'))
            {
               Application.initPlayerPage(
                  JSON.parse(properties.options.data.file)
               );
            }
         }
      );
   },
   initFilesListPage: function() {
      $('#update-button').click(
         function()
         {
            $('#waiting-popup').popup('open');
            setTimeout(function(){
               Application.updateMediaList();
            }, 150);
         }
      );
      $(document).on('endupdate', function(){
         Application.createFilesList('files-list', AppFile.getAppFiles());
         $('#waiting-popup').popup('close');
      });
      Application.createFilesList('files-list', AppFile.getAppFiles());
   },
   initPlayerPage: function(file) {
      Player.stop();
      $('#media-name').text(file.name);
      $('#media-path').text(file.fullPath);
      $('#player-play').click(function() {
         Player.playPause(file.fullPath);
      });
      $('#player-stop').click(Player.stop);
      $('#time-slider').on('slidestop', function(event) {
         Player.seekPosition(event.target.value);
      });
   },
   updateIcons: function()
   {
      if ($(window).width() > 480)
      {
         $('a[data-icon], button[data-icon]').each(function() {
            $(this).removeAttr('data-iconpos');
         });
      }
      else
      {
         $('a[data-icon], button[data-icon]').each(function() {
            $(this).attr('data-iconpos', 'notext');
         });
      }
   },
   openLinksInApp: function()
   {
      $("a[target=\"_blank\"]").on('click', function(event) {
         event.preventDefault();
         window.open($(this).attr('href'), '_target');
      });
   },
   updateMediaList: function() {
      window.requestFileSystem(
         LocalFileSystem.PERSISTENT,
         0,
         function(fileSystem){
            var root = fileSystem.root;
            AppFile.deleteFiles();
            Application.collectMedia(root.fullPath, true);
         },
         function(error){
            console.log('File System Error: ' + error.code);
         }
      );
   },
   collectMedia: function(path, recursive, level) {
      if (level === undefined)
         level = 0;
      var directoryEntry = new DirectoryEntry('', path);
      if(!directoryEntry.isDirectory) {
         console.log('The provided path is not a directory');
         return;
      }
      var directoryReader = directoryEntry.createReader();
      directoryReader.readEntries(
         function (entries) {
            var appFile;
            var extension;
            for (var i = 0; i < entries.length; i++) {
               if (entries[i].name === '.')
                  continue;

               extension = entries[i].name.substr(entries[i].name.lastIndexOf('.'));
               if (entries[i].isDirectory === true && recursive === true)
                  Application.collectMedia(entries[i].fullPath, recursive, level + 1);
               else if (entries[i].isFile === true && $.inArray(extension, AppFile.EXTENSIONS) >= 0)
               {
                  appFile = new AppFile(entries[i].name, entries[i].fullPath);
                  appFile.addFile();
                  console.log('File saved: ' + entries[i].fullPath);
               }
            }
         },
         function(error) {
            console.log('Unable to read the directory. Errore: ' + error.code);
         }
      );

      if (level === 0)
         $(document).trigger('endupdate');
      console.log('Current path analized is: ' + path);
   },
   createFilesList: function(idElement, files)
   {
      $('#' + idElement).empty();

      if (files == null || files.length == 0)
      {
         $('#' + idElement).append('<p>No files to show. Would you consider a files update (top right button)?</p>');
         return;
      }

      function getPlayHandler(file) {
         return function playHandler() {
            $.mobile.changePage(
               'player.html',
               {
                  data: {
                     file: JSON.stringify(file)
                  }
               }
            );
         };
      }

      function getDeleteHandler(file) {
         return function deleteHandler() {
            var oldLenght = AppFile.getAppFiles().length;
            var $parentUl = $(this).closest('ul');

            file = new AppFile('', file.fullPath);
            file.deleteFile();
            if (oldLenght === AppFile.getAppFiles().length + 1)
            {
               $(this).closest('li').remove();
               $parentUl.listview('refresh');
            }
            else
            {
               console.log('Media not deleted. Something gone wrong.');
               navigator.notification.alert(
                  'Media not deleted. Something gone wrong so please try again.',
                  function(){},
                  'Error'
               );
            }
         };
      }

      var $listElement, $linkElement;
      files.sort(AppFile.compareIgnoreCase);
      for(var i = 0; i < files.length; i++)
      {
         $listElement = $('<li>');
         $linkElement = $('<a>');
         $linkElement
         .attr('href', '#')
         .text(files[i].name)
         .click(getPlayHandler(files[i]));

         // Append the link to the <li> element
         $listElement.append($linkElement);

         $linkElement = $('<a>');
         $linkElement
         .attr('href', '#')
         .text('Delete')
         .click(getDeleteHandler(files[i]));

         // Append the link to the <li> element
         $listElement.append($linkElement);

         // Append the <li> element to the <ul> element
         $('#' + idElement).append($listElement);
      }
      $('#' + idElement).listview('refresh');
   }
};

Mengelola Tautan Eksternal

Di bagian sebelumnya dari seri ini, saya menyebutkan bahwa poin menarik dari halaman kredit adalah atribut target="_blank" yang diterapkan pada tautan. Bagian ini akan menjelaskan mengapa metode openLinksInApp () kelas Aplikasi masuk akal.

Sekali waktu, Cordova digunakan untuk membuka tautan eksternal di Cordova WebView yang sama yang menjalankan aplikasi. Saat ini, tautan eksternal dibuka, secara default, menggunakan Cordova WebView jika URL ada di daftar putih aplikasi Anda. URL yang tidak ada dalam daftar putih Anda dibuka menggunakan API InAppBrowser. Saat ini, tautan eksternal dibuka, secara default, menggunakan Cordova WebView jika URL ada di daftar putih aplikasi Anda. URL yang tidak ada dalam daftar putih Anda dibuka menggunakan API InAppBrowser. Jika Anda tidak mengelola tautan dengan cara yang benar, atau jika pengguna mengetuk tautan yang ditampilkan di InAppBrowser atau sistem dan kemudian memilih untuk kembali, semua perangkat seluler jQuery Mobile hilang. Perilaku ini terjadi karena file CSS dan JavaScript dimuat oleh halaman utama, dan yang berikut dimuat menggunakan AJAX. Sebelum mengungkap solusi, mari kita lihat apa yang InAppBrowser.

The InAppBrowser adalah browser web yang ditampilkan di aplikasi Anda ketika Anda menggunakan jendela. Buka panggilan.

API ini memiliki tiga metode:

addEventListener (): Memungkinkan Anda untuk mendengarkan tiga peristiwa (loadstart, loadstop, dan exit) dan melampirkan fungsi yang berjalan segera setelah peristiwa-peristiwa itu dipecat
removeEventListener (): Menghapus listener yang terlampir sebelumnya.
close (): Digunakan untuk menutup jendela InAppBrowser.

Jadi, apa solusinya? Tujuan dari fungsi openLinksInApp (), digabungkan dengan whitelist yang ditentukan dalam file konfigurasi, adalah untuk menangkap klik pada semua tautan eksternal yang dikenali dengan menggunakan atribut target = "_ blank", dan membukanya menggunakan window.open () metode. Dengan teknik ini, kami akan menghindari masalah yang dijelaskan, dan pemain kami akan terus melihat dan bekerja seperti yang diharapkan.

Bagian Selanjutnya

Pada seri ketiga dan terakhir dari seri ini, kita akan melihat file terakhir yang tersisa sehingga Anda dapat menyelesaikan proyek dan bermain-main dengannya.

1
2	function AppFile(name, fullPath)
3	{
4	var _db = window.localStorage;
5	var _tableName = 'files';
6
7	this.name = name;
8	this.fullPath = fullPath;
9
10	this.save = function(files)
11	{
12	_db.setItem(_tableName, JSON.stringify(files));
13	}
14
15	this.load = function()
16	{
17	return JSON.parse(_db.getItem(_tableName));
18	}
19	}
20
21	AppFile.prototype.addFile = function()
22	{
23	var index = AppFile.getIndex(this.fullPath);
24	var files = AppFile.getAppFiles();
25
26	if (index === false)
27	files.push(this);
28	else
29	files[index] = this;
30
31	this.save(files);
32	};
33
34	AppFile.prototype.deleteFile = function()
35	{
36	var index = AppFile.getIndex(this.fullPath);
37	var files = AppFile.getAppFiles();
38	if (index !== false)
39	{
40	files.splice(index, 1);
41	this.save(files);
42	}
43
44	return files;
45	};
46
47	AppFile.prototype.compareTo = function(other)
48	{
49	return AppFile.compare(this, other);
50	};
51
52	AppFile.prototype.compareToIgnoreCase = function(other)
53	{
54	return AppFile.compareIgnoreCase(this, other);
55	};
56
57	AppFile.EXTENSIONS = ['.mp3', '.wav', '.m4a'];
58
59	AppFile.compare = function(appFile, other)
60	{
61	if (other == null)
62	return 1;
63	else if (appFile == null)
64	return -1;
65
66	return appFile.name.localeCompare(other.name);
67	};
68
69	AppFile.compareIgnoreCase = function(appFile, other)
70	{
71	if (other == null)
72	return 1;
73	else if (appFile == null)
74	return -1;
75
76	return appFile.name.toUpperCase().localeCompare(other.name.toUpperCase());
77	};
78
79	AppFile.getAppFiles = function()
80	{
81	var files = new AppFile().load();
82	return (files === null) ? [] : files;
83	};
84
85	AppFile.getAppFile = function(path)
86	{
87	var index = AppFile.getIndex(path);
88	if (index === false)
89	return null;
90	else
91	{
92	var file = AppFile.getAppFiles()[index];
93	return new AppFile(file.name, file.fullPath);
94	}
95	};
96
97	AppFile.getIndex = function(path)
98	{
99	var files = AppFile.getAppFiles();
100	for(var i = 0; i < files.length; i++)
101	{
102	if (files[i].fullPath.toUpperCase() === path.toUpperCase())
103	return i;
104	}
105
106	return false;
107	};
108
109	AppFile.deleteFiles = function()
110	{
111	new AppFile().save([]);
112	};