React Native ile Media Player Uygulaması
React Native ile basit bir media player uygulaması yapalım. Bu uygulamada hem video oynatalım hem de sadece müzik çaldıralım.
Ilk olarak MusicPlayer adında bir proje oluşturalım.
react-native init MusicPlayer
Video ya da müzik oynatmamız için hali hazırda bulunan modüllerden birini uygulamamıza kuralım. Bu örnekte react-native-video modülünü kullanacağız.
npm install –save react-native-video
Modülümü yükledik. Şimdi ise bunu projemize bağlayalım.
react-native link react-native-video
Video/Müzik oynatıcı modülümüz kullanıma hazırdır. Basit bir arayüz yapalım. Içerisinde sadece bir tane resim olsun. Buna poster de diyebiliriz. Resmimizin altında Başlat/Durdur tuşu, onun altında çalan müziğin zamanını ifade eden bir yazı olsun.
Media Player uygulamamızda state içerisinde 3 tane değişken tutacağız.
pause;
Müziğimizin/Videomuzun oynayıp oynamadığını tutan bool bir değişken.
stateAudio;
Müzik/Video oynuyorsa Durdur, aksi taktirde Başlat yazısı yazması için kullanılacak.
currentTime;
Müzik/Video oynayan zaman dilimini göstermek için kullanılacak.
Yüklediğimiz modülü render() fonksiyonunun içerisinde bir yere yerleştireceğiz. Örnekte render fonksiyonunun en altına koyduk. Bileşenimizde kullandığımız parametre/fonksiyonlar şu şekildedir;
uri
Müzik/Video kaynağını belirtiriz. Internetten bir url adresi olabildiği gibi localde bir dosya da olabilir. Örnek olarak göstermek gerekirse;
uri:’https://www.youtube.com/watch?v=-fqF0FVk26M’
uri: ‘ahmetkaya’, type:’mp4′
Burada bilinmesi gereken çok mühim noktalar bulunmaktadır. Bunlardan ilki eğer ki localde bir dosyayı kaynak olarak gösterecek isek bu dosya mp3 dosyası OLAMAZ. Yüklediğimiz modül bunu desteklemiyor. Ikinci olarak ise yine localdeki bir dosyayı oynatmak istiyorsak bu dosyayı android/ios klasörlerinin içerisinde eklememiz gerekmektedir.
Android için;
Dosyamızı ana klasörümüzde android – > app -> src – >main -> res -> raw -> dosyamız olacak şekilde yerleştirmeliyiz.
Ios için;
Xcode ile projemizi açalım. Proje klasörünün içerisinde dosyamızı yerleştirelim. Projemize tıklayıp sağ tarafta açılan alanda Build Phases bölümüne girelim. Burada Copy Bunde Resources alanına dosyamızı ekleyelim. Aşağıdaki resimde gösterilmektedir. Bu kadar.
ref
Referans vermek için kullanırız.
onProgress
Oynatılan müzik/video nun toplam süresini ve anlık toplam çalan süreyi gösteren bilgiyi barındıran fonksiyondur. Her saniye tetiklenmektedir. Biz bu fonksiyonu başka bir fonksiyona bağladık. Bağlanan fonksiyon ile state yapısındaki currentTime değişkenini güncel tutmaya çalıştık.
audioOnly
Sadece müzik çalmasını istersek audioOnly parametresini true yapmalıyız. Default olarak false gelmektedir.
paused
Oynatılan medyanın durdurulması/oynatılması için kullanılır. Default olarak false gelmektedir. Bu da medyayı oynat demektir.
playInBackground
Medyanın, uygulama arka plana alındığında devam edip etmemesi için kullanılır. Default olarak false gelmektedir. Arka planda devam etmesi için true olarak değiştirilmelidir.
ignoreSilentSwitch
Medyanın arka planda çalması için bu parametrenin “ignore” olarak değiştirilmesi gerekmektedir. Ios için geçerlidir.
Son olarak ise Xcode ile projemizi açalım. AppDelegate.m dosyamızda üst tarafa;
#import <AVFoundation/AVFoundation.h>
ekleyelim. Altaki fonksiyonumuzun içerisinde de (return den önce) ;
[[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryAmbient error:nil];
ekleyelim. Artık uygulamamız hazır durumdadır. Ios ve Android emulatorlerde uygulamamızı çalıştıralım.
Video oynatmak için ise Video bileşenini güncelliyoruz. Aynı zamanda bileşenimizin boyutlarını da değiştiriyoruz.
Not: Bu yazıda basit bir media player uygulaması yapıldı. Daha gelişmiş olanı başka bir bölümde yapılacaktır.
Teşekkürler.
