Müzik Player Uygulaması

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.

npm install

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.

react-native link react-native-sound

Uygulama Fonksiyonları

Çalma listesi oluştur

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.

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.

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.

Ç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.

Ç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.

Ö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.

Uygulama Tasarımı

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.

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.

Sonuç

Teşekkürler.