{"id":995,"date":"2022-03-14T11:24:52","date_gmt":"2022-03-14T11:24:52","guid":{"rendered":"https:\/\/asgardius.company\/?p=995"},"modified":"2022-03-14T11:24:52","modified_gmt":"2022-03-14T11:24:52","slug":"como-crear-una-aplicacion-para-escuchar-radio-por-internet-en-android-studio-con-exoplayer","status":"publish","type":"post","link":"https:\/\/asgardius.company\/?p=995","title":{"rendered":"C\u00f3mo crear una aplicaci\u00f3n para escuchar radio por internet en Android Studio con ExoPlayer"},"content":{"rendered":"\n
\"\"
Asteroide con antena de radio<\/figcaption><\/figure>\n\n\n\n

ExoPlayer es una herramienta que nos permite crear aplicaciones de streaming de forma relativamente sencilla<\/p>\n\n\n\n

Vamos a crear un proyecto nuevo en Android Studio y en la secci\u00f3n de tel\u00e9fono y tablet seleccionamos “Actividad vac\u00eda”<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Le ponemos un nombre a la app, un nombre de paquete (este debe ser \u00fanico), seleccionamos nuestro lenguaje de programaci\u00f3n principal (para este tutorial usaremos Java) y el SDK m\u00ednimo (eleg\u00ed API 21 para Android 5.0)<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Nos vamos a la carpeta “res” del proyecto en la parte izquierda del la interfaz. Buscamos la subcarpeta mipmap y borramos los archivos .webp que comienzan con ic_launcher<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Hacemos clic derecho sobre la carpeta “res”, nos vamos al men\u00fa “nuevo” y elegimos “recurso imagen”<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Seleccionamos la imagen que queremos como \u00edcono de notificaci\u00f3n y una vez establecido repetimos los pasos para el \u00edcono del lanzador<\/p>\n\n\n\n

Nos vamos al archivo build.gradle correspondiente al modulo de la app y agregamos los siguiente dentro del partado de las dependencias<\/p>\n\n\n\n

implementation 'com.google.android.exoplayer:exoplayer:2.16.1'<\/code><\/pre>\n\n\n\n
Abrimos el archivo MainActivity.java y agregamos las siguientes l\u00edneas de c\u00f3digo<\/p>\n\n\n\n
        ExoPlayer player = new ExoPlayer.Builder(this).build();\n        \/\/ Build the media item.\n        MediaItem mediaItem = MediaItem.fromUri(<radio-url>);\n        \/\/ Set the media item to be played.\n        player.setMediaItem(mediaItem);\n        \/\/ Prepare the player.\n        player.prepare();\n        \/\/ Start the playback.\n        player.play();<\/code><\/pre>\n\n\n\n
Realizamos las importaciones necesarias y nos quedar\u00eda algo parecido a esto<\/p>\n\n\n\n
package asgardius.page.r3player;\n\nimport androidx.appcompat.app.AppCompatActivity;\n\nimport android.os.Bundle;\n\nimport com.google.android.exoplayer2.ExoPlayer;\nimport com.google.android.exoplayer2.MediaItem;\n\npublic class MainActivity extends AppCompatActivity {\n\n    @Override\n    protected void onCreate(Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.activity_main);\n        ExoPlayer player = new ExoPlayer.Builder(this).build();\n        \/\/ Build the media item.\n        MediaItem mediaItem = MediaItem.fromUri(<radio-url>);\n        \/\/ Set the media item to be played.\n        player.setMediaItem(mediaItem);\n        \/\/ Prepare the player.\n        player.prepare();\n        \/\/ Start the playback.\n        player.play();\n    }\n}<\/code><\/pre>\n\n\n\n
Editamos nuestro AndroidManfest para darle permisos de acceso a internet y agregamos lo siguiente entre <manifest> y <aplication><\/p>\n\n\n\n
<uses-permission android:name=\"android.permission.INTERNET\" \/><\/code><\/pre>\n\n\n\n
En caso de utilizar una fuente http sin SSL necesitamos agregar lo siguiente dentro de application para evitar problemas con Android 9 y versiones posteriores<\/p>\n\n\n\n
android:usesCleartextTraffic=\"true\"<\/code><\/pre>\n\n\n\n
Para evitar que la pantalla cambie a modo horizontal podemos agregar lo siguiente dentro de <activity><\/p>\n\n\n\n
android:screenOrientation=\"portrait\"<\/code><\/pre>\n\n\n\n
Nos quedar\u00eda algo parecido a esto<\/p>\n\n\n\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<manifest xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    package=\"asgardius.page.r3player\">\n    <uses-permission android:name=\"android.permission.INTERNET\" \/>\n\n    <application\n        android:allowBackup=\"true\"\n        android:icon=\"@mipmap\/ic_launcher\"\n        android:label=\"@string\/app_name\"\n        android:roundIcon=\"@mipmap\/ic_launcher_round\"\n        android:supportsRtl=\"true\"\n        android:usesCleartextTraffic=\"true\"\n        android:theme=\"@style\/Theme.TheRedRobotRadio\">\n\n        <activity\n            android:name=\".MainActivity\"\n            android:screenOrientation=\"portrait\"\n            android:exported=\"true\">\n            <intent-filter>\n                <action android:name=\"android.intent.action.MAIN\" \/>\n                <category android:name=\"android.intent.category.LAUNCHER\" \/>\n            <\/intent-filter>\n        <\/activity>\n    <\/application>\n\n<\/manifest><\/code><\/pre>\n\n\n\n
La depuramos en un emulador o un dispositivo f\u00edsico y deber\u00eda conectarse a la emisora seleccionada despues de abrirse. Para detener la reproducci\u00f3n es necesario retirar la app del panel de apps recientes<\/p>\n\n\n\n
Agregaremos una imagen a la actividad principal para que no se vea vac\u00eda. Para ello elegimos una imagen y la arrastramos a la carpeta “drawable” dentro de “res”. Yo eleg\u00ed uno de los fondos utilizados en otro proyecto donde estoy trabajando<\/a>. Ahora agregamos la imagen en la interfaz de la actividad principal (“activity_main.xml” dentro de la carpeta “layout” ubicada en “res”)<\/p>\n\n\n\n
Reemplazamos el contenido por lo siguiente<\/p>\n\n\n\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:id=\"@+id\/activity_main\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:orientation=\"vertical\"\n    android:theme=\"@style\/Theme.AppCompat\"\n    tools:context=\".MainActivity\">\n\n    <ImageView\n        android:id=\"@+id\/imageView\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"250dp\"\n        android:background=\"@drawable\/galaxy\"\n        android:contentDescription=\"@string\/galaxy\"\n        tools:ignore=\"MissingConstraints\" \/>\n\n    <LinearLayout\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"100dp\"\n        android:layout_margin=\"20dp\"\n        android:orientation=\"horizontal\"\n        android:padding=\"10dp\">\n\n        <Button\n            android:id=\"@+id\/start\"\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"match_parent\"\n            android:layout_weight=\"1\"\n            android:text=\"Play\" \/>\n\n        <Button\n            android:id=\"@+id\/stop\"\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"match_parent\"\n            android:layout_weight=\"1\"\n            android:text=\"Stop\" \/>\n    <\/LinearLayout>\n<!--\n    <TextView\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Hello World!\"\n        app:layout_constraintBottom_toBottomOf=\"parent\"\n        app:layout_constraintLeft_toLeftOf=\"parent\"\n        app:layout_constraintRight_toRightOf=\"parent\"\n        app:layout_constraintTop_toTopOf=\"parent\" \/>\n-->\n\n<\/LinearLayout><\/code><\/pre>\n\n\n\n
Reemplazando “galaxy” por el nombre de nuestra imagen y ajustando la altura para que coincida con las proporciones de esta.<\/p>\n\n\n\n
Agregaremos la funci\u00f3n correspondiente a los botones reci\u00e9n agregados<\/p>\n\n\n\n
Buscamos las siguientes l\u00edneas en el archivo “MainActivity.java”<\/p>\n\n\n\n
                MediaItem mediaItem = MediaItem.fromUri(\"<radio-url>\");\n                player.setMediaItem(mediaItem);\n                \/\/ click handling code\n                \/\/ Prepare the player.\n                player.prepare();\n                \/\/ Start the playback.\n                player.play();<\/code><\/pre>\n\n\n\n
Las reemplazamos por lo siguiente<\/p>\n\n\n\n
        Button startplayer = (Button)findViewById(R.id.start);\n        startplayer.setOnClickListener(new View.OnClickListener(){\n            @Override\n            public void onClick(View view) {\n                MediaItem mediaItem = MediaItem.fromUri((<radio-url>);\n                player.setMediaItem(mediaItem);\n                \/\/ click handling code\n                \/\/ Prepare the player.\n                player.prepare();\n                \/\/ Start the playback.\n                player.play();\n            }\n        });\n        Button stopplayer = (Button)findViewById(R.id.stop);\n        stopplayer.setOnClickListener(new View.OnClickListener(){\n            @Override\n            public void onClick(View view) {\n                \/\/ click handling code\n                player.stop();\n            }\n        });<\/code><\/pre>\n\n\n\n
El archivo quedar\u00e1 parecido a este<\/p>\n\n\n\n
package asgardius.page.r3player;\n\nimport androidx.appcompat.app.AppCompatActivity;\n\nimport android.os.Bundle;\nimport android.view.View;\nimport android.widget.Button;\n\nimport com.google.android.exoplayer2.ExoPlayer;\nimport com.google.android.exoplayer2.MediaItem;\n\npublic class MainActivity extends AppCompatActivity {\n\n    @Override\n    protected void onCreate(Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.activity_main);\n        ExoPlayer player = new ExoPlayer.Builder(this).build();\n        \/\/ Build the media item.\n\n        Button startplayer = (Button)findViewById(R.id.start);\n        startplayer.setOnClickListener(new View.OnClickListener(){\n            @Override\n            public void onClick(View view) {\n                MediaItem mediaItem = MediaItem.fromUri((<radio-url>);\n                player.setMediaItem(mediaItem);\n                \/\/ click handling code\n                \/\/ Prepare the player.\n                player.prepare();\n                \/\/ Start the playback.\n                player.play();\n            }\n        });\n        Button stopplayer = (Button)findViewById(R.id.stop);\n        stopplayer.setOnClickListener(new View.OnClickListener(){\n            @Override\n            public void onClick(View view) {\n                \/\/ click handling code\n                player.stop();\n            }\n        });\n\n\n    }\n}<\/code><\/pre>\n\n\n\n
Ahora tenemos una app sencilla con la cual poder escuchar nuestra emisora de radio favorita<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Referencias<\/p>\n\n\n\n
https:\/\/exoplayer.dev\/hello-world.html<\/a><\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
ExoPlayer es una herramienta que nos permite crear aplicaciones de streaming de forma relativamente sencilla Vamos a crear un proyecto nuevo en Android Studio y en la secci\u00f3n de tel\u00e9fono y tablet seleccionamos “Actividad vac\u00eda” Le ponemos un nombre a la app, un nombre de paquete (este debe ser \u00fanico), seleccionamos nuestro lenguaje de programaci\u00f3n… Seguir leyendo C\u00f3mo crear una aplicaci\u00f3n para escuchar radio por internet en Android Studio con ExoPlayer<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-995","post","type-post","status-publish","format-standard","hentry","category-uncategorized","entry"],"_links":{"self":[{"href":"https:\/\/asgardius.company\/index.php?rest_route=\/wp\/v2\/posts\/995","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/asgardius.company\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/asgardius.company\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/asgardius.company\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/asgardius.company\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=995"}],"version-history":[{"count":0,"href":"https:\/\/asgardius.company\/index.php?rest_route=\/wp\/v2\/posts\/995\/revisions"}],"wp:attachment":[{"href":"https:\/\/asgardius.company\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=995"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/asgardius.company\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=995"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/asgardius.company\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}