B4A Library MusicPlayerView

Discussion in 'Additional libraries, classes and official updates' started by Johan Schoeman, Jul 24, 2015.

  1. Johan Schoeman

    Johan Schoeman Expert Licensed User

    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
     

    Attached Files:

    Last edited: Jul 25, 2015
    Isac, ArminKH, cambopad and 7 others like this.
  2. MarcoRome

    MarcoRome Expert Licensed User

    Great Job ;)
     
    Johan Schoeman and jsanchezc like this.
  3. susu

    susu Well-Known Member Licensed 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
     
  4. Johan Schoeman

    Johan Schoeman Expert Licensed User

    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.

     

    Attached Files:

    Last edited: Jul 25, 2015
  5. DonManfred

    DonManfred Expert Licensed User

    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
    [​IMG]

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

     
    Last edited: Jul 25, 2015
  6. Johan Schoeman

    Johan Schoeman Expert Licensed User

    1.mp3 must be copied to the /files folder of the B4A project and then be added to the project's Files tab. Do you have it set up like that @DonManfred ?
     
  7. DonManfred

    DonManfred Expert Licensed User

    [​IMG]
     
  8. DonManfred

    DonManfred Expert Licensed 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 ;)
     
  9. Johan Schoeman

    Johan Schoeman Expert Licensed User

    ...mmm, see your 100% circle. Will see if I can duplicate it on a different device from the one that I have been working with.
     
  10. DonManfred

    DonManfred Expert Licensed User

    i´m using a Samsung S6 EDGE Android 5.1.1 Model DM-G925F
     
    RandomCoder likes this.
  11. Johan Schoeman

    Johan Schoeman Expert Licensed User

    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.
     
  12. Johan Schoeman

    Johan Schoeman Expert Licensed User

    Will see what it does on my S4 mini...
     
  13. DonManfred

    DonManfred Expert Licensed User

    I´m confirming here again (see hangouchat). It is working on my tablet running Android 4.4.2 Samsung SM-P900
     
    Johan Schoeman likes this.
  14. Johan Schoeman

    Johan Schoeman Expert Licensed User

    Thanks @DonManfred. Also working on my S4 mini with Android 4.2.2
     
  15. Johan Schoeman

    Johan Schoeman Expert Licensed 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
     

    Attached Files:

    Last edited: Jul 25, 2015
    MarcoRome, DonManfred and susu like this.
  16. susu

    susu Well-Known Member Licensed User

    I haven't try your lib yet but it seems I can't play mp3 from URL, right?
     
  17. Johan Schoeman

    Johan Schoeman Expert Licensed User

    That is correct. The original project does not download the mp3 songs via a URL - only an image of the URL that you provide.
     
  18. MarcoRome

    MarcoRome Expert Licensed 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
    Code:
    mpv.Initialize("mpv")
                    
    Activity.AddView(mpv, 20%x5%y60%x50%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.
     
  19. MarcoRome

    MarcoRome Expert Licensed User

    You can utilize :

    Code:
    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
     
  20. Johan Schoeman

    Johan Schoeman Expert Licensed User

    Version 3 has this:

    Code:
    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
     
Loading...