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: 468
  • JavaCode.zip
    136.1 KB · Views: 336
Last edited:

susu

Well-Known Member
Licensed User
Longtime User
Why we need Picasso library? It's download/caching image library, right? Please don't get me wrong, your libraries are great. Thank you so much. I just wonder why we need it. :D
 

Johan Schoeman

Expert
Licensed User
Longtime User
Why we need Picasso library? It's download/caching image library, right? Please don't get me wrong, your libraries are great. Thank you so much. I just wonder why we need it. :D
Here it is with Picasso activated. Use the attached B4A project as it has the necessary permissions added to the manifest file. Also posting the updated Java code. You can now load the image from your resources or use Picasso to fetch an image based on the image URL that you specify. You must still download 1.mp3 from the Dropbox link in Post #1 of this thread and add it to the /files folder of the B4A project.

 

Attachments

  • b4aMusicPlayerView_V2.zip
    169.5 KB · Views: 248
  • JavaCode_V2.zip
    136.3 KB · Views: 229
Last edited:

DonManfred

Expert
Licensed User
Longtime User
Here it is with Picasso activated.

I downloaded this, installed the lib and jars

Downloaded 1.mps from link in post #1 and put it into assets

Started the example with no changes

I got a picture and the player to see correctly....

The app looks like this when started... Note the 100% circle
musicplayerviewjohan001.png


Then i tried to play the mp3 clicking on the image in the middle

** Activity (main) Create, isFirst = true **
** Activity (main) Resume **
** Activity (main) Pause, UserClosed = false **
** Activity (main) Resume **
dur = 0
java.lang.ArithmeticException: divide by zero
at main.java.co.mobiwise.library.MusicPlayerView.calculatePastProgressDegree(MusicPlayerView.java:794)
at main.java.co.mobiwise.library.MusicPlayerView.onDraw(MusicPlayerView.java:451)
at android.view.View.draw(View.java:16466)
at android.view.View.updateDisplayListIfDirty(View.java:15396)
at android.view.View.getDisplayList(View.java:15418)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3693)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3672)
at android.view.View.updateDisplayListIfDirty(View.java:15356)
at android.view.View.getDisplayList(View.java:15418)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3693)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3672)
at android.view.View.updateDisplayListIfDirty(View.java:15356)
at android.view.View.getDisplayList(View.java:15418)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3693)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3672)
at android.view.View.updateDisplayListIfDirty(View.java:15356)
at android.view.View.getDisplayList(View.java:15418)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3693)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3672)
at android.view.View.updateDisplayListIfDirty(View.java:15356)
at android.view.View.getDisplayList(View.java:15418)
at android.view.ThreadedRenderer.updateViewTreeDisplayList(ThreadedRenderer.java:310)
at android.view.ThreadedRenderer.updateRootDisplayList(ThreadedRenderer.java:316)
at android.view.ThreadedRenderer.draw(ThreadedRenderer.java:355)
at android.view.ViewRootImpl.draw(ViewRootImpl.java:2890)
at android.view.ViewRootImpl.performDraw(ViewRootImpl.java:2684)
at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2271)
at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1264)
at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6943)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:777)
at android.view.Choreographer.doCallbacks(Choreographer.java:590)
at android.view.Choreographer.doFrame(Choreographer.java:560)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:763)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:145)
at android.app.ActivityThread.main(ActivityThread.java:6837)
at java.lang.reflect.Method.invoke(Native Method)
at java.lang.reflect.Method.invoke(Method.java:372)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1404)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1199)
 
Last edited:

Johan Schoeman

Expert
Licensed User
Longtime User
As i´m saying this i tried to play the mp3 in vlc and got a length of >4 minutes shown... In the picture i see 1:40
hmm ;)
The 1:40 is just the default value that the time has been set to in the java lib. Mine also shows 1:40 when I start the app but no problem playing the mp3 (and then shows the correct timing as per pic in post #1.
 

Johan Schoeman

Expert
Licensed User
Longtime User

Johan Schoeman

Expert
Licensed User
Longtime User
Have added methods to:

1. Change the text size of the timing
2. Change the stroke width of the completed and incompleted progress indicators.

New library files are in the /files folder of the attached B4A project. Also posting the updated Java source code.

2.png


musicplayerview
Author:
Johan Schoeman
Version: 1
  • MusicPlayerView
    Fields:
    • ba As BA
    Methods:
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As Rect)
    • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • IsInitialized As Boolean
    • RemoveView
    • RequestFocus As Boolean
    • SendToBack
    • SetBackgroundImage (arg0 As Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    • isRotating As Boolean
    • start
      Start turning image
    • stop
      Stop turning image
    Properties:
    • AutoProgress As Boolean [write only]
      If you do not want to automatic progress, you can disable it
      and implement your own handler by using setProgress method repeatedly.
    • Background As Drawable
    • ButtonColor As Int [write only]
    • Color As Int [write only]
    • CoverBitmap As Bitmap [write only]
    • CoverPicture As Drawable [write only]
    • CoverURL As String [write only]
      gets image URL and load it to cover image.It uses Picasso Library.
    • Enabled As Boolean
    • Height As Int
    • Left As Int
    • Max As Int [write only]
      Sets total seconds of music
    • PlayerTextSize As Int [write only]
    • Progress As Int
      Get current progress seconds
    • ProgressEmptyColor As Int [write only]
      sets progress empty color
    • ProgressEmptyWidth As Float [write only]
    • ProgressLoadedColor As Int [write only]
      sets progress loaded color
    • ProgressLoadedWidth As Float [write only]
    • ProgressVisibility As Boolean [write only]
    • Tag As Object
    • TimeColor As Int [write only]
      Sets time text color
    • Top As Int
    • Velocity As Int [write only]
      Set velocity.When updateCoverRotate() method called,
      increase degree by velocity value.
    • Visible As Boolean
    • Width As Int
 

Attachments

  • JavaCode_V3.zip
    136.8 KB · Views: 236
  • b4aMusicPlayerView_V3.zip
    169.9 KB · Views: 270
Last edited:

susu

Well-Known Member
Licensed User
Longtime User
I haven't try your lib yet but it seems I can't play mp3 from URL, right?
 

Johan Schoeman

Expert
Licensed User
Longtime User
I haven't try your lib yet but it seems I can't play mp3 from URL, right?
That is correct. The original project does not download the mp3 songs via a URL - only an image of the URL that you provide.
 

MarcoRome

Expert
Licensed User
Longtime User
Hi Johan with version 3 i have this effect:

2015-07-25 15.18.09.png


As you see i have ProgressBar with any pixel white and timer overlap

This is code
B4X:
mpv.Initialize("mpv")
                Activity.AddView(mpv, 20%x, 5%y, 60%x, 50%y)
                mpv.TimeColor = Colors.red
                mpv.ButtonColor = Colors.Transparent
                mpv.ProgressVisibility = True
                'mpv.BitmapCover = bm
                mpv.CoverURL = "......"
                mpv.ProgressEmptyColor = Colors.white
                mpv.ProgressLoadedColor = 0xFF7D26CD
                mpv.PlayerTextSize = 25

with version 1 work progressbar and timer.
 

MarcoRome

Expert
Licensed User
Longtime User
I haven't try your lib yet but it seems I can't play mp3 from URL, right?
You can utilize :

B4X:
Dim MediaPlayerWeb As MediaPlayerStream
MediaPlayerWeb.Initialize("MediaPlayerWeb")
MediaPlayerWeb.Load(url)

......
Sub MediaPlayerWeb_StreamReady
    MediaPlayerWeb.Play
End Sub
.......
...

is same thing that MediaPlayer ( Play, Stop, etc. ) but you can play mp3 from url
 

Johan Schoeman

Expert
Licensed User
Longtime User
Hi Johan with version 3 i have this effect:

As you see i have ProgressBar with any pixel white and timer overlap

This is code
B4X:
mpv.Initialize("mpv")
                Activity.AddView(mpv, 20%x, 5%y, 60%x, 50%y)
                mpv.TimeColor = Colors.red
                mpv.ButtonColor = Colors.Transparent
                mpv.ProgressVisibility = True
                'mpv.BitmapCover = bm
                mpv.CoverURL = "......"
                mpv.ProgressEmptyColor = Colors.white
                mpv.ProgressLoadedColor = 0xFF7D26CD
                mpv.PlayerTextSize = 25

with version 1 work progressbar and timer.

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
 
Top