Native Audio Player Tutorial    
This topic is assigned to Vick

Oct 23, 2014 10:49 AM

                                 Native Audio Player Page Tutorial


We are glad to announce you that a new Native Page for playing Audio files and streaming online Radio stations is released.

In order to add a new Native Audio Player Page into your app, go to Edit Pages menu then click on the "+" (Add New Page) button. From the list of the page types available select Native Audio Player and click on the "Create" button.

                                 Once the page is added, you may proceed with editing it.



1) Audio URL. Here you may insert any audio file or Radio Stream URLs. If you set a file name, make sure to upload it in Resource Manager before. We support the following Audio formats: .mp3, .mp4, .wav. For Radio Streaming, we support any types or URLs, except RTSP.


2) Default Artwork. Upload a cover in PNG or Jpeg format. You can upload any size and any resolution. If your media file has a cover image, then it will be displayed on the device instead of the one uploaded here. This, however, does not apply for Radio Stream URLs. 

3) Default Title. If your media file or Stream URL does not have a title, you may set one here. If your media file (Stream) has a title, it will be shown in the app.


4) Default Subtitle.  If your media file or Stream URL does not have subtitles, you may set them here. If your media file (Stream) has ones, they will be shown in the app. 

  

                                                         Here is how this page works on a device:


                                                                      

         

In my example I have used a Radio Stream URL. You may see the title, subtitles, time of playing, cover, play/pause/stop buttons and a volume bar.

The background color, image, text color and buttons' colors can be customized from the Style Settings of this page (in App Dashboard > Edit Pages).


The Stream or Play progress can be also controlled outside of the app from the Native iOS bottom bar and Screen Lock. 


                                


In order to use these settings, make sure to enable the Audio Background Mode during the submission process of the IOS app.


*NOTE:

The Audio Background Mode setting cannot be tested in the App Previewers. This is available only in live Apps or AdHoc builds.


The following Ads systems are supported for this page type: AdMob, DFP, iAd, SCAds

 

This feature is available for iOS and Android apps. 



Oct 29, 2014 09:46 AM
Hello,
is there any way to change this page so that it doesn't display a cover?
I see that you cannot access the page's html in the edit page, is there a plan to change that?


Oct 31, 2014 09:53 AM
Hello Nazca,


If you do not need a cover, do not set any. It works pretty simple. This is not a HTML based page .It is a native one. 

best regards,
Victor,
SC Team.


Nov 01, 2014 10:47 PM
hi,
the instructions says it supports the following but I don't see an option for uploading files. 

mp3, .mp4, .wav

Also I would like the option to have multiple mp3's uploaded so that users can select which mp3 to play just like an album. is this possible?

thanks 




Nov 03, 2014 03:46 AM
Anthony,


1) You may upload the media files in Resource Manager. Then just set the name of the file in the Audio URL field like I explained in step 1 .

2) There is no option for uploading multiple files. A Playlist option may be added later.

best regards,
Victor,
SC Team.


Nov 03, 2014 07:59 AM
is it legal to use radiostream of a radio station into an app?


Dec 03, 2014 12:32 AM
Thanks for a great audioplayer. 
But I think this new player missing some functions. 
1. It must be possible to overwrite the title and subtitle from the file info. 
2. There are Missing a repeat button. 
3. A android version include a repeat function.

Is it something that comes at a time? 
Keep up the good works my friends :-)
Regards - Jannik


Dec 03, 2014 04:59 AM
Jannik,

1. It works like this now. If the Audio file or Radio Stream Link has a title and subtitle tags then they will overwrite the ones from the Edit Page. More than that, the Cover Image will also be also overwritten (for Media files only, not Streams) .

2.We will consider adding such an option in the next updates.

best regards,
Victor,
SC Team.


Mar 05, 2015 05:04 AM
Hello Guys!
Anything new about the repeat and playlist function ???   

Regards - Jannik


Mar 19, 2015 07:17 AM
Jannik,


At the moment these features are not yet implemented. 


Jul 18, 2015 07:11 AM
I made one app for radio streaming with 'Audio Stream' (an interactive web-based media player for your online audio stream) page. It's working on my iPhone app previewer but not working on Android phone.

Here is the app link: https://play.google.com/store/apps/details?id=radio.allmedialink.com "

Please download this app and please test in your any android phone. It's not working though I can see it's working on my 'iPhone app-previewer' app.


Jul 20, 2015 09:12 AM
Hello Mahmud,


This feature works for iOS only. For Android you may use the Radio Streaming or Audio Play pages.

Victor,
SC Team.


Jul 20, 2015 12:30 PM
Hi Mahmud, 
It is best manners to create a new thread and only request solution in one instead of putting the same message many times on different threads. 

I looked at the code in your app Apple can play .pls files android cannot. 

example: http://live.abcradiobd.fm:8282/listen.pls change this to http://live.abcradiobd.fm:8282
 if it does not work change to 
 http://live.abcradiobd.fm:8282/1.mp3

 Some of your streaming url's may not be compatible with using this android page type you can use the xaudio 
<a href="xaudio://track-1.mp3">Track #1</a>

try to find audio streams ending in mp3 for best compatiblity
 


Jun 16, 2016 02:28 PM
HI we have installed both the audio stream page and the native audio player as test pages to see how the players work.

for the audio stream the "Repeat" or loop button is there, but not in the Native Audio player. How can we add custom html and js so that Loop or Repeat is a button on the player.

I don't see a button to access the code to do so.

Here is the code from the streaming audio:

<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat" style="">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off" style="display: none;">repeat off</a></li>
</ul>

I've seen other posts from several years ago making this request - is it being considered? We want users to be able to listen in airplane mode so streaming is not an option.

thanks


Jul 06, 2016 03:51 AM
When i exit this page the stream stops playing, is there a way to leave it running in the background?


Sep 22, 2017 09:41 AM
When do you add a repeat button ?   
I've also seen other posts making this request - is it being considered?
Jannik
Hello, Jannik. There are several improvements planned for this feature, including the repeat function. This improvements will be made a soon as possible. We will notify once there will be any related news on this case.

Vick
SC support team


    1 2   next