B4A Library MusicPlayerView

It (mostly) wraps this Github project. The library files are in the /files folder of the attached B4A project. Copy them (2 x JAR and 1 x XML) to your additional library folder. You will also need to download 1.mp3 from here. Copy this file to the /files folder of the attached B4A project and then add it to the project in the Files tab.
Posting the B4A project as well as the Java source code. The B4A project is a base to work from - add further B4A code, mp3 songs, and cover images to the B4A project to suite your needs. There is no B4A code at present in imv1_click and imv_2 click (the bottom to imageviews displaying "<" and ">" . Use these two subs to change to a new song and to load a new spinning image.

Note that pause/play is in the centre of the spinning image. Click on it to play/pause the music and the spinning disc.

Edit: Project updated in Post #4 to enable downloading of spinning images with Picasso.
Edit: New update in post #15

1.png
 

Attachments

  • b4aMusicPlayerView.zip
    169.1 KB · Views: 661
  • JavaCode.zip
    136.1 KB · Views: 491
Last edited:

MarcoRome

Expert
Licensed User
Longtime User
Version 3 has this:

B4X:
    mpv.TimeColor = Colors.red
    mpv.PlayerTextSize = 25
    mpv.ButtonColor = Colors.Transparent
    mpv.ProgressVisibility = True
'    mpv.CoverBitmap = bm                                                                          'load the spinning image from a bitmap or....
    mpv.CoverURL = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRI1mwVxCNoS2jyi6X4HEC1rGEJNLjuu6_0ofeuLCqJLabLUO1g"         '...fetch an image with Picasso
    mpv.ProgressEmptyColor = Colors.white
    mpv.ProgressLoadedColor = 0xFF7D26CD
    mpv.ProgressLoadedWidth = 15.0
    mpv.ProgressEmptyWidth = 5.0



If i add this code:
B4X:
mpv.ProgressLoadedWidth = 15.0
mpv.ProgressEmptyWidth = 5.0

i havent pixel white but anyway time is overlap.

2015-07-25 16.05.04.png


This is code:
B4X:
        mpv.Initialize("mpv")
                Activity.AddView(mpv, 20%x, 5%y, 60%x, 50%y)
                mpv.TimeColor = Colors.red
                mpv.PlayerTextSize = 25
                mpv.ButtonColor = Colors.Transparent
                mpv.ProgressVisibility = True
                mpv.CoverURL = "http://cdn-images.deezer.com/images/cover/5c626d0198099fa96cddd69558291916/250x250-000000-80-0-0.jpg"
                mpv.ProgressEmptyColor = Colors.white
                mpv.ProgressLoadedColor = 0xFF7D26CD
                mpv.ProgressLoadedWidth = 15.0
                mpv.ProgressEmptyWidth = 5.0
 

Johan Schoeman

Expert
Licensed User
Longtime User
If i add this code:
B4X:
mpv.ProgressLoadedWidth = 15.0
mpv.ProgressEmptyWidth = 5.0

i havent pixel white but anyway time is overlap.

Change the text size and see is if it makes a difference eg
mpv.PlayerTextSize = 15
 

Johan Schoeman

Expert
Licensed User
Longtime User
If i add this code:
B4X:
mpv.ProgressLoadedWidth = 15.0
mpv.ProgressEmptyWidth = 5.0

i havent pixel white but anyway time is overlap

Something funny with you layout...why are your next and previous buttons out of position....?
 

MarcoRome

Expert
Licensed User
Longtime User
Something funny with you layout...why are your next and previous buttons out of position....?
I havent buttons previous and next ( are they necessary ? ).
and also if i change mpv.PlayerTextSize = 15 dont change. Start good but after that start music i have same effect ( time is overlap )
 

Johan Schoeman

Expert
Licensed User
Longtime User
I havent buttons previous and next ( are they necessary ? ).
and also if i change mpv.PlayerTextSize = 15 dont change. Start good but after that start music i have same effect ( time is overlap )
Change the B4A code to this as it seems to sort out some of the problems:

B4X:
#Region  Project Attributes
    #ApplicationLabel: MusicPlayerView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: portrait
    #CanInstallToExternalStorage: False
    #AdditionalJar: picasso-2.5.2
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.
    Dim MediaPlayer1 As MediaPlayer
    Dim nativeMe As JavaObject


End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private mpv As MusicPlayerView
    Dim bm As Bitmap
    Dim imv1, imv2 As ImageView
    Dim flag As Int = 0
   
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
   
    nativeMe.InitializeContext
   

    Activity.LoadLayout("main")
    mpv.Initialize("mpv")
   
    imv1.Initialize("imv1")
    imv2.Initialize("imv2")
   
    imv1.Bitmap = LoadBitmap(File.DirAssets,"icon_previous.png")
    imv2.Bitmap = LoadBitmap(File.DirAssets,"icon_next.png")
   
    Activity.AddView(mpv, 20%x, 5%y, 60%x, 50%y)
    Activity.AddView(imv1, 20%x, 50%y, 30%x, 10%y)
    Activity.AddView(imv2, 50%x, 50%y, 30%x, 10%y)
   
    bm.Initialize(File.DirAssets,"1.jpg")
   
    mpv.TimeColor = Colors.red
    mpv.PlayerTextSize = 25
    mpv.ButtonColor = Colors.Transparent
    mpv.ProgressVisibility = True
'    mpv.CoverBitmap = bm                                                                          'load the spinning image from a bitmap or....
    mpv.CoverURL = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRI1mwVxCNoS2jyi6X4HEC1rGEJNLjuu6_0ofeuLCqJLabLUO1g"         '...fetch an image with Picasso
    mpv.ProgressEmptyColor = Colors.white
    mpv.ProgressLoadedColor = 0xFF7D26CD
    mpv.ProgressLoadedWidth = 15.0
    mpv.ProgressEmptyWidth = 5.0
   



End Sub
Sub Activity_Resume

    MediaPlayer1.Initialize( )
    MediaPlayer1.Load(File.DirAssets, "1.mp3")
    Dim dur As Int = 0
    dur = MediaPlayer1.Duration
    mpv.Max = dur/1000


End Sub
Sub Activity_Pause (UserClosed As Boolean)

MediaPlayer1.Stop
MediaPlayer1.Release

End Sub
Sub mpv_paused()

mpv.stop
MediaPlayer1.Pause

End Sub
Sub mpv_started()

Dim dur As Int
dur = MediaPlayer1.Duration
mpv.Max = dur/1000

mpv.start
MediaPlayer1.Play

End Sub
Sub imv1_click


End Sub
Sub imv2_click
If flag = 0 Then
  mpv.CoverURL = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQOvdqO7A3pDHJAclAEeQkDjYWYG14dxKJl2eiJdTsyFViCIX2h"
  flag = 1
Else
  flag = 0
  mpv.CoverURL = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRI1mwVxCNoS2jyi6X4HEC1rGEJNLjuu6_0ofeuLCqJLabLUO1g"
End If

End Sub


No, you don't need the next / previous buttons.
 

Johan Schoeman

Expert
Licensed User
Longtime User
I havent buttons previous and next ( are they necessary ? ).
and also if i change mpv.PlayerTextSize = 15 dont change. Start good but after that start music i have same effect ( time is overlap )
Text size does definitely change when I use for eg
mpv.PlayerTextSize = 10

Sure you have copied the new lib files in the /files folder of the B4A project in post with V3 to your additional library folder?
 

Johan Schoeman

Expert
Licensed User
Longtime User
Text size does definitely change when I use for eg
mpv.PlayerTextSize = 10

Sure you have copied the new lib files in the /files folder of the B4A project in post with V3 to your additional library folder?
Attached the lib files - for just in case...
 

Attachments

  • LibMusicPlayerView.zip
    14.6 KB · Views: 260

MarcoRome

Expert
Licensed User
Longtime User
Same problem., but anyway i resolve in this mode: mpv.PlayerTextSize = 0
maybe the problem about my device also if i try 3 devices ( samsung Note + Asus Tablet + Huawey ) .
the problem is only PlayerTextSize.
Anyway thank you Johan
 
Top