Share
Bienvenue dans la deuxième partie de notre didacticiel sur le lecteur de musique Corona SDK. Dans cette partie, nous allons placer l’interface en scène, gérer la logique de l’application, les commandes de boutons et les étapes permettant de créer l’application finale..
S'il vous plaît assurez-vous de vérifier partie 1 de la série pour bien comprendre ce tutoriel.
Ce sont les variables que nous allons utiliser. Lisez les commentaires dans le code pour en savoir plus sur eux. Certains de leurs noms s’expliquent d'eux-mêmes, il n'y aura donc pas de commentaire..
-- Variables local currentSong = 1 local en lecture locale timerSource local min = 0 local sec = 0
Déclarer toutes les fonctions comme local au début.
-- Fonctions local Main = buildGUI local = playCurrentSong local = stopSong local = nextSong local = local prevSong = updateInfo local = local updateProgress =
Nous allons ensuite créer la fonction qui initialisera toute la logique de l'application:
-- Fonction principale Fonction Main () buildGUI () end
La fonction suivante place toute l'interface graphique sur la scène. Il est construit dans le même ordre que celui dans lequel nous avons déclaré les variables, de sorte que vous pourrez facilement identifier chaque partie par les noms de variables..
Accentsconagua
fonction buildGUI () bg = display.newImage ('background.png') infoBar = display.newImage ('infoBar.png', 20, 168) imageMarker = display.newImage ('imageMarker.png', 30, 178) cdCover = display.newImage ('s1.png', 30, 178) titleText = display.newText ('1. Ici sans vous' ', 117, 176, native.systemFontBold, 14) titleText: setTextColor (246, 237, 240) parText = display.newText ('By', 121, 197, native.systemFont, 10) byText: setTextColor (191, 182, 183) artistText = display.newText ('3 portes vers le bas', 137, 197, native.systemFontBold, 10) artistText: setTextColor (244, 204, 106) buttonBar = display.newImage ('buttonBar.png', 20, 278) playBtn = display.newImage ('playBtn.png', 25, 279) stopBtn = display.newImage ('stopBtn .png ', 27, 282) stopBtn.isVisible = false prevBtn = display.newImage (' prevBtn.png ', 55, 279) nextBtn = display.newImage (' nextBtn.png ', 85, 279) progressBar = display.newImage ('progressBar.png', 126, 290) progress = display.newRoundedRect (0, 0, 100, 10, 3) progress: setFillColor (244, 204, 106) prog Ressource: setReferencePoint (display.TopLeftReferencePoint) progress.x = 126 progress.y = 290 progress.isVisible = false actuel = display.newText ('00: 00 ', 235, 288, native.systemFont, 9) actuel: setTextColor (246) , 237, 240) total = display.newText ('/ 00:00', 259, 288, native.systemFont, 9) total: setTextColor (191, 182, 183) playBtn: addEventListener ('tap', playCurrentSong) stopBtn: addEventListener ('tap', stopSong) nextBtn: addEventListener ('tap', nextSong) prevBtn: addEventListener ('tap', prevSong) end Nous ajoutons les écouteurs des boutons dans les dernières lignes pour que les boutons remplissent la fonction correspondante.
Ce code fonctionne lorsque le bouton de lecture est enfoncé.
Il réinitialise les compteurs de chanson et de temps (au cas où ce n’est pas la première fois que vous appuyez sur le bouton) et lit la chanson spécifiée par le bouton. morceau en cours variable. Après cela, le en jouant variable est définie sur vrai, cela lira automatiquement la chanson suivante ou précédente lorsque les touches suivantes ou précédentes seront enfoncées.
function playCurrentSong: tapez sur (e) audio.rewind (chansons [currentSong]) sec = 0 min = 0 audio.play (chansons [currentSong]) en cours de lecture = true updateInfo () timerSource = timer.performWithDelay (1000, updateProgress, 0) playBtn .isVisible = false stopBtn.isVisible = true end
Il démarre également la minuterie pour commencer le compteur de durée de la chanson et cache le bouton de lecture pour révéler le bouton d'arrêt.
Lorsque vous appuyez sur le bouton d'arrêt, la chanson en cours cesse de jouer et la minuterie est annulée. Les boutons sont retournés à la normale et en jouant est réglé sur faux.
function stopSong: taper (e) audio.stop () timer.cancel (timerSource) playBtn.isVisible = true stopBtn.isVisible = false en cours de lecture = false fin
Cette fonction arrête la chanson en cours et passe à la suivante dans le tableau, si le en jouant variable est définie sur
vrai il va jouer automatiquement. Il vérifie également si la chanson suivante est la dernière. Si tel est le cas, elle revient à la première de la ligne..
function nextSong: appuyez sur (e) audio.stop () currentSong = currentSong + 1 if (currentSong> #songs), puis currentSong = 1, fin si (en cours de lecture), puis audio.rewind (chansons [currentSong]) sec = 0 min = 0 audio .play (songs [currentSong]) fin updateInfo () fin
Comme vous pouvez l’imaginer, cette fonction se comporte de la même manière que la précédente, mais à l’arrière..
fonction prevSong: appuyez sur (e) audio.stop () currentSong = currentSong - 1 if (currentSong < 1) then currentSong = #songs end if(playing) then audio.rewind(songs[currentSong]) sec = 0 min = 0 audio.play(songs[currentSong]) end updateInfo() end
Ce code (appelé dans les trois dernières fonctions) gère les informations affichées dans les deux barres.
Il met à jour la pochette de l'album, le titre, l'artiste et le temps des chansons.
function updateInfo () titleText.text = chaîne de caractères (currentSong)? '. '? songsInfo [currentSong] [2] titleText: setReferencePoint (display.TopLeftReferencePoint) titleText.x = 117 artistText.text = songsInfo [currentSong] [3] artistText: setReferencePoint (display.TopLeftReferencePoint) artistText.x = 137 display cdCover = nil local cdCover = display.newImage (songsInfo [currentSong] [4], 30, 178) local totalMin = math.floor (audio.getDuration (songs [currentSong]) / 1000/60) - total localSec = math. sol (audio.getDuration (chansons [currentSong]) / 1000% 60) - total.text = '/'? totalMin? ':'? totalSec total: setReferencePoint (display.topLeftReferencePoint) total.x = 275 fin
Exécutée toutes les secondes, cette fonction met à jour la barre de progression du morceau en fonction de la position actuelle et de sa durée totale..
Notez que les méthodes utilisées par l'API Corona peuvent renvoyer des résultats différents selon le format des fichiers audio..
fonction updateProgress: timer (e) sec = sec + 1 if (sec == 60) puis sec = 0 min = min + 1 fin locale secS = chaîne (sec) if (#secS < 2) then sec = '0'? sec end current.text = min? ':'? sec current:setReferencePoint(display.topLeftReferencePoint) current.x = 250 -- Progress Bar local position = min? sec position = position * 1000 local duration = audio.getDuration(songs[currentSong]) local percent = (position / duration) print(position, duration, percent) progress.isVisible = true progress.xScale = percent end
Afin de démarrer initialement l'application, theяPrincipaleLa fonction doit être appelée. Avec le code ci-dessus en place, nous le ferons ici:
Principale()
Le fichier Default.png est une image qui s’affiche dès le démarrage de l’application pendant que l’iOS charge les données de base pour afficher l’écran principal. Ajoutez cette image dans le dossier source de votre projet, elle sera automatiquement ajoutée par le complémenteur Corona..
En utilisant les graphiques que vous avez créés auparavant, vous pouvez maintenant créer une belle et jolie icône. La taille de l'icône de l'iPhone non rétine est 57x57px, mais la version de la rétine est 114x114px et le magasin iTunes nécessite une version de 512x512px. Je suggère de créer d'abord la version 512? 512, puis de la réduire pour les autres tailles.
Il n'est pas nécessaire que les angles soient arrondis ou que la lumière soit transparente, iTunes et l'iPhone le feront pour vous..
Il est temps de faire le test final. Ouvrez le simulateur Corona, accédez au dossier de votre projet, puis cliquez sur Ouvrir. Si tout fonctionne comme prévu, vous êtes prêt pour l'étape finale!
Dans le simulateur Corona, allez àFichier> Construireandet sélectionnez votre appareil cible. Remplissez les données requises et cliquez sur
construire. Attendez quelques secondes et votre application sera prête pour le test de l'appareil et / ou la soumission pour la distribution.!
Expérimentez avec le résultat final et essayez de créer votre version personnalisée de l'application!
J'espère que vous avez aimé cette série de tutoriels et que vous l'avez trouvé utile. Merci pour la lecture!
