Müzik Player Uygulaması - React Native - MOBİL KOD AKADEMİ
React Native ile basit bir Media Player uygulaması yapmıştık. Şimdi ise biraz daha görselliğin olduğu ve fonksiyonlarında da tam bir uygulama olacak şekilde efektif olduğu müzik player uygulaması yapalım.
Uygulama Oluşturma ve Modüllerin Yüklenmesi
MüzikPlayer adında bir proje oluşturuyoruz.
react-native init MüzikPlayer
Proje klasörüne girip eksik kalan modüllerin yüklenmesi için kurulumu tamamlıyoruz.
Media Player uygulamamızda react-native-video modülünü kullanmıştık. Fakat Müzik Player uygulamamızda sadece mp3 yani ses dosyası olacağı için react-native-sound modülüne başvuracağız. Öncelikle modülü yükleyelim.
npm install react-native-sound –save
Yüklediğimiz modülü projeye bağlayalım.
Ilk olarak uygulamada müzik listesini oluşturan bir array oluşturduk. Burada müziklerin bir takım bilgileri mevcut.
title: Müzik adı
url: Müziğin arka planda bulunduğu yol ve ismi
type: Müzik tipi
duration: Müziğin süresi
index: Müziğin çalma listesindeki indeksi
playing: Müziğin çalıp çalmadığını belirten ifade
State yapımızda array adında bir değişkenimiz mevcut. Array müzik listemizi güncel olarak tutacak. Bu sebeple ilk olarak uygulama ilk açıldığında muzikler arrayinde yer alan tüm müzikleri state yapısındaki arraye eşitliyoruz. Daha sonra FlatList bileşenimize bu arrayi veriyoruz.
State Yapısı ve componentWillMount
State Yapısındaki array Değişkenine Güncel Müzik Listemizi Koyuyoruz
Müzik listemiz oluştu. Şimdi ise müzik listesinde yapılacak işlemlere geçelim. Öncelikle listede yenileme yapılacağı zaman onRefresh fonksiyonu çalışacak. Müzik listesindeki elemanların içeriklerinde bir değişiklik olduğunda da listenin yenilenmesi için renderItem fonksiyonuna iki adet parametre koyduk. Bu parametreler müzik listesindeki elemanların çalma listesine ekleme yapıldığında ve çalan şarkı değiştiğinde listede yenileme yapılması için kullanılmıştır.
renderItem ile Listenin Oluşturulması
Müzik listemizdeki elemanlardan herhangi birine basılarak müzik, çalma listesine eklenebilir ya da çıkarılabilir. Bu işlemde ise FlatList içerisindeki elemanların sınıfı olan ListItem sınıfında _onPress fonksiyonunu onPressItem fonksiyonuna bağladık. onPressItem fonksiyonunu ise renderItem fonksiyonunda MusicPlayer sınıfındaki _onPressItem fonksiyonuna bağladık. Yani müzik listesinde herhangi bir müziğe basıldığında MusicPlayer sınıfındaki _onPressItem fonksiyonu çalışacaktır. Bu fonksiyonda tıklanan müzik çalma listesinde yoksa çalma listesine eklenmekte ya da çalma listesinde varsa listeden çıkarılmaktadır. Daha sonra ise o müziğin index değeri güncellenmekte ve liste yenilenmektedir.
Listedeki Herhangi Bir Müziğe Tıklandığında Çalışacak Fonksiyon
Çalma listesini oynat
Play tuşuna basıldığında çalma listesinde müzik varsa müzikleri oynatmaya başlar. Müziklerin oynatılma işlemi react-native-sound modülü ile yapılmaktadır. Öncelikle müziğin yolu belirtilerek Sound sınıfında bir değişken oluşturulmaktadır. Daha sonra ise play fonksiyonu ile müzik oynatılmaktadır. play fonksiyonunun içerisinde müzik bittiğinde çalma listesindeki diğer şarkıya geçmesi için işlemler yapılmaktadır. Oynatılan müzik state yapısındaki playingSound değişkenine eşitlenmektedir.
Müzik Çalması – Durdurulması – Yeniden Oynatılması
react-native-sound Modülü ile Müzik Oynatma
Çalma listesini durdur
Pause tuşuna basıldığında state yapısındaki playingSound değişkeninde müzik durdurulmaktadır.
Sonraki şarkıya geç
Next tuşuna basıldığında state yapısındaki playingIndex değişkeni 1 artırılmaktadır. Daha sonra çalan şarkı sonlandırılarak playingIndex değerindeki çalma listesi indeksinde bulunan müzik oynatılmaktadır.
Sonraki Müziğe Geç
Önceki şarkıya geç
Prev tuşuna basıldığında state yapısındaki playingIndex değişkeni 1 azaltılmaktadır. Daha sonra çalan şarkı sonlandırılarak playingIndex değerindeki çalma listesi indeksinde bulunan müzik oynatılmaktadır.
Önceki Müziğe Geç
Müzik Player uygulamamızda öncelikle üst kısımda bir adet poster yerleştirdik. Posterimizin altına prev – play/pause – next butonlarını temsil eden resimler koyduk. Bunlarında da altına müzik listemizin olacağı bir FlatList koyduk.
Uygulama Ana Tasarımı
Müzik listemizdeki elemanların tasarımını ise ListItem sınıfında belirledik. Ilk başa müziğin çalma listesinde olup olmadığını ve varsa kaçıncı sırada olduğunu belirtecek bir Text bileşeni koyduk. Bunun yanına müzik adının ve tipinin belirtildiği iki adet Text bileşeni koyduk. En son kısma ise müziklerin sürelerini belirten bir Text bileşeni koyduk. Eğer müzik çalıyorsa bu Text bileşeninin yerine çaldığını ifade eden resim koyduk. Bu durumu ise MusicPlayingOrDuration sınıfında belirttik.
Uygulamadaki Liste Elemanlarının Tasarımı
Liste Elemanının Son Kısmı
ios Uygulama Ilk Açılışı
ios Çalma Listesi Oluşturulması
ios Çalma Listesinden Eleman Çıkarılması
ios Çalma Listesinin Oynatılması
android Uygulama Ilk Açılışı
android Çalma Listesinin Oynatılması
android, app, code, create, develop, example, install, iOS, kod, link, media, mobil, modül, mp3, müzik, müzik player, node, örnek, react native, react-native-uygulama, türkçe, tutorial, uygulama, uygulama oluşturma
3 thoughts on “Müzik Player Uygulaması”
iyi günler peki playerı arka planda çalıştırmak istersek ne yapmamız gerekiyor.yardımcı olabilirseniz sevinirim
Öncelikle import ettiğiniz Sound objesi için
kısmını kodunuza ekleyin. Daha sonra IOS için Info.plist dosyasına
ekleyin ya da Xcode üzerinden
audio bölümünü işaretleyin.