De nos jours, beaucoup d'utilisateurs ont besoin de créer une APP RADIO pour leur station de radio en ligne ou avec des playlists de musique.
Mobincube offre cette option utile et dans ce tutoriel nous allons voir comment créer une application radio et comment utiliser certains fournisseurs de streaming pour le faire.
Sur Internet, nous avons des milliers de fournisseurs de radio en ligne disponibles que nous pouvons utiliser afin de créer une radio en streaming.
Voici quelques exemples:
La deuxième étape est d'enregistrer le contenu en mode hors connexion en utilisant par exemple:
FORMAT AUDIO ET PROTOCOLES
Il est très important de se souvenir du FORMAT AUDIO et des PROTOCOLES soutenus par Mobincube:
Les FORMATS pris en charge sont les suivants: MP3 - AAC - Vorbis (H. 264 / VP8)
Les PROTOCOLES pris en charge sont les suivants: Http - RTP (Real Time Protocol) et RTSP ou Real Time Streaming Protocol (ce dernier n'est pas pris en charge par iOS, donc assurez-vous que vous utilisez un protocole HTTP pour le rendre compatible avec iOS).
MOBINCUBE ET STREAMING
Voyons comment utiliser chaque fonctionnalité de nos applications.
Dans Mobincube, nous avons trois façons d'utiliser l'audio dans nos applications:
PLAYER
L'action Player nous permet d'associer une URL à tout élément à ouvrir par le lecteur audio par défaut du périphérique.
Si nous assignons l'action PLAYER à un bouton de notre application, lorsque l'utilisateur clique sur le bouton avec l'action associée "player", notre système affichera une liste avec toutes les applications multimédia associées aux flux audio. Ici, nous pouvons choisir l'un d'entre eux pour jouer le fichier audio.
Cela fonctionne selon le système d'exploitation et le lecteur.
Nous pouvons insérer des URL comme:
HTTP (avec l'adresse audio du streaming)
RSTP (n'est pas supporté par iOS)
PLAY - STOP
Ces actions nous permettent d'ouvrir un audio local ou en streaming à l'intérieur de l'application elle-même.
Ce que nous devons faire est d'insérer la ressource en ligne, en format MP3, à l'action Play and Stop et nous devrons autoriser Mobincube à le valider en ouvrant Resource Manager et en téléchargeant la ressource de streaming audio.
Dans le cas où nous avons un fichier de liste de lecture avec un format différent, par exemple tapez txt. , Nous devrons utiliser un tour pour le faire fonctionner. Nous pouvons ouvrir ce fichier dans l'éditeur de texte et rechercher l'URL du fichier mp3, compatible avec le gestionnaire de ressources. Nous pouvons copier et coller ce contenu dans le Resource Manager en tant que ressource en ligne et télécharger le fichier pour jouer et arrêter l'action.
RÉACTION SUR MINIMISER OU CHANGER D'ECRAN
Il est très important de connaître les différentes réactions de l'application lors de l'utilisation des différentes actions: Player ou Play.
Lorsque nous utilisons l'action PLAY, cela nous permettra d'écouter l'audio en arrière-plan, même si nous minimisons ou modifions l'écran de l'application.
Pour arrêter l'audio, nous devrons utiliser un bouton STOP ou quitter complètement l'application.
Avec l'action PLAYER, nous pouvons contrôler la musique et naviguer sur l'App sans écouter la musique en arrière-plan. Cela signifie que, si nous fermons ou naviguons dans l'application, l'audio est éteint.
COMMENT CRÉER UN APP DE RADIO ÉTAPE PAR ÉTAPE
Maintenant, voyons, étape par étape, comment créer une application radio avec Mobincube.
Dans l'exemple suivant, nous créerons un écran SPLASH en tant que présentation de l'application Radio qui enverra les utilisateurs, en quelques millisecondes, à un autre écran (dans notre exemple, à l'écran principal).
Sur l'écran principal, nous avons inséré un TITRE, une ÉLÉMENT D'IMAGE dans le corps de l'écran, et une BARRE DE MENU avec 4 icônes.
Nous avons attribué une action à chaque icône:
INFO: nous allons attribuer à cette icône l'action: "aller à l'écran" et, comme une destination, l'écran de détail: "INFO", comme dans l'image suivante.
PLAY: nous allons assigner à cette icône l'action: "aller à l'écran" et, comme une destination, l'écran de détail: "PLAY", comme dans l'image suivante.
WEB: nous allons assigner à cette icône l'action: "aller à l'écran" et, comme une destination, l'écran web: "WebStreaming", comme dans l'image suivante.
CONTACT: nous allons attribuer à cette icône l'action: "open url" et, comme une destination, nous allons écrire le script suivant: mailto:[email]?subject=[subject]&body=[content]
(Vous devez remplacer le courrier électronique par l'adresse à laquelle vous voulez envoyer l'e-mail, vous pouvez choisir n'importe quel sujet.) Idem pour le contenu, vous pouvez définir un contenu par défaut si vous l'écrivez, ou laissez l'utilisateur de l'écrire. Vous ne voulez pas un contenu par défaut il suffit de supprimer '&body='
Rappelez-vous: vous devez supprimer les «parenthèses» ([]) de la chaîne.)
De cette façon, lorsque l'utilisateur clique sur le bouton, ils seront en mesure d'envoyer un e-mail, comme dans l'image suivante.
Nous allons maintenant concevoir la structure des 3 autres pages: INFO, PLAY, WebStreaming.
INFO D'ÉCRAN:
Dans l'écran INFO, nous allons insérer les éléments suivants:
1 Image d'en-tête
1 Elément de texte avec la description de notre Canal Radio
1 Barre de menus
Comme vous pouvez le voir dans l'image ci-dessus, nous avons la même barre de menu de l'écran principal, mais cette barre a une couleur différente pour l'icône INFO. Nous avons cloné la barre de menus principale et inséré une couleur de fond pour l'icône liée à l'écran que nous utilisons (dans ce cas, l'icône INFO). Pour que l'utilisateur sache qu'il est dans l'écran d'information (nous ferons la même chose pour les autres barres à glisser vers les autres écrans).
SCREEN PLAY:
Nous sommes maintenant dans l'écran de détail de PLAY.
Dans l'écran PLAY, nous allons insérer:
1 Image d'en-tête
1 Table avec 2 icônes
1 Elément de texte
1 Barre de menus
Nous assignerons une action aux 2 icônes téléchargées dans le tableau:
Nous allons assigner l'action "PLAY" au bouton Play et ensuite nous allons télécharger un fichier audio mp3 à partir du Resource Manager.
Nous allons assigner l'action "STOP" au bouton Stop et ensuite nous chargerons le même fichier audio mp3 à partir du Resource Manager.
De cette façon, l'utilisateur sera capable de reproduire les fichiers audio téléchargés et de l'arrêter quand ils le souhaitent.
Dans l'exemple suivant, nous verrons comment utiliser l'action PLAYER.
Pour lier les écrans de l'application, nous allons assigner l'action: "aller à l'écran" à l'élément de texte de l'écran de lecture, et ensuite nous allons créer un nouvel écran de détail: "PLAYER", comme dans l'image suivante.
LECTEUR D'ECRAN:
Nous allons ouvrir l'écran PLAYER pour concevoir la structure.
Dans l'écran LECTEUR, nous allons insérer les éléments suivants:
1 Image d'en-tête
1 Elément d'image au centre du corps de l'écran
1 Barre de menus
Nous allons assigner l'action "PLAYER" à l'élément image, et ensuite nous allons insérer l'URL du streaming de la Radio.
De cette façon, lorsque l'utilisateur clique sur ce bouton, l'URL de la diffusion radio sera ouverte à partir des applications multimédias de son appareil qui sont associées aux flux audio, et ils peuvent choisir l'un d'entre eux pour lire le fichier audio.
ÉCRAN WEB:
Voyons une autre fonctionnalité qui nous permet d'intégrer le contenu du streaming Radio dans notre application. Nous utiliserons l'écran Web qui intègre le contenu dans l'application, afin que les utilisateurs puissent écouter la musique à l'intérieur de l'application elle-même, sans quitter l'application.
Dans cet écran, nous avons traîné la barre de navigation.
Maintenant, nous pouvons utiliser 2 options:
1. Insertion de l'URL du streaming, avec l'action Player. De cette façon, lorsque l'utilisateur dispose d'une connexion Internet, il sera en mesure d'écouter le streaming.
2. Si nous avons le code d'un lecteur Web, obtenu à partir d'une radio web, nous pouvons coller le code dans le corps d'un HTML et le télécharger dans un fichier ZIP pour pouvoir le naviguer alors que l'appareil n'a pas d'accès à Internet.
Le fichier ZIP doit contenir un index.html que l'application utilisera pour démarrer la navigation sur le Web.
Dans cet exemple, nous copions le code du lecteur à partir d'une page Web:
Ensuite, nous allons ouvrir ou créer un index.html et nous allons coller le code copié dans le corps de la html, comme dans l'exemple suivant:
Enfin, nous devrons zipper le fichier et le télécharger dans l'écran Web.
LORSQUE VOUS CRÉEZ UNE APP DE RADIO, VOUS POUVEZ UTILISER TOUTES LES FONCTIONNALITÉS ÉNUMÉRÉES CI-DESSUS OU CHOISIR L'UN QUI SUIT VOS BESOINS.
MAINTENANT CRÉEZ VOTRE PROPRE APP DE RADIO ET AMUSEZ-VOUS!
Plus dans : Comment créer une App de Radio (Vidéo)