Mp3 or Wav file audio play on browse screen

Support
#1

Hi,

I had mp3 or Wav extension file stored in database in form of Url and same is also stored on path.
I want to play the audio on same tab restrict download option.

#2

HI Adnan

Have you looked at this? AudioPlayer Add-on - Vaadin Add-on Directory

I used it with Jmix 1.5.x and intend to use it again with 2.x.x but I have not started yet.

Best regards
Chris

#3

can you share demo project. My requirement is i had mp3 file stored on path, i want to play on browse screen.

#4

@adnan.khan

Hi Adnan

I must apologize to you for my last post because in the meantime I have discovered that the Vaadin AudioPlayer Add-on is not a direct replacement for the com.vaadin.ui.Audio functionality that I used with CUBA and with Jmix 1.5.x.

I had contacted Vaadin support after I was not able to use com.vaadin.ui.Audio with Jmix 2.x.x and the support agent in my chat said that the AudioPlayer Add-on was the follow-up to com.vaadin.ui.Audio and should be considered a replacement.

I finally had some free time yeserday and tried to compile the demo project but I gave up after several attempts. I could not solve this Maven “install” problem…

[ERROR] Hint: Check that your module inherits 'com.google.gwt.core.Core' either directly or indirectly (most often by inheriting module 'com.google.gwt.user.User')

And after looking through the add-on code, I decided that it was to bloated for the simple MP3 playback that I require and was using in Jmix 1.5.x.

I believe that I can implement the JavaFX MediaPlayer to handle my use cases and I intend to do a proof-of-concept in the coming days.

If you need an example for Jmix 1.x.x, I can post parts of my code here. However, if you need a Jmix 2.x.x implementation you will either have to wait until I have experimented with JavaFX or try doing it yourself.

Please let me know which version you require. Thanks in advance.

Best regards
Chris

#5

Currently i am using jmix version ‘1.5.0’

#6

@adnan.khan

Hi Adnan

I have prepared this complete Jmix 1.5.x audio demo project for you:

classicaudio.zip (99.7 KB)

I copied it from my project, so it has some additional code in it for my real application’s user resource management. In my real application each user has a Membership instance that manages and stores their available resource limits dependent upon their subscription. For example, I continuously calculate how much file space they use, dependent upon the MP3 file(s) that they upload. This information is stored in a Membership entity, which I did not include in this demo. To properly do this, it is necessary for me to re-calculate this information if the user uploads and then discards this newly uploaded file and then uploads a second choice, before they actually save the entity. This use case makes the code more complex. Furthermore, I have an entity listener that checks if the actual stored file needs to be deleted when the entity is deleted and the amount of remaining file space is re-calculated within the listener. If the user is deleted, then I must also ensure that his/her uploaded file(s) are deleted and the listener also performs this function when the delete is cascaded to the Instrument entity. Therefore, you should consider this in your application. You may find all of this extra resource management code useful (or maybe not).

I hope that this helps. Good luck.

Best regards
Chris

1 Like
HTML5 <audio> element is not supported in Jmix 2.x.x
#7

Hi Chris Beaham,

I had multiple use case

Use Case 1 :

  1. Audio file will be saved on the particular location and the storage path will be updated in the table.
    and i want the audio to be play on the browse screen instead on edit screen.

Use Case 2 :

  1. Audio file will be in URL link and the same link will be updated in the table.

I had checked the demo project and it is working as per requirement but only thing is can we play the audio on same screen and also apart from play and stop can we add audio progress bar we can slide the progress bar to jump from 1: 01 sec to 2 : 00 minutes like forwarding the audio or we can have progress bar with 2x or 4x forward or backward button.

Also Thank you for the Sharing the demo project.

As per below image there is a audio path on screen and on click i want audio (link is just for reference we can add audio buttons also) to be played on same row. multiple data will be there so multiple audio must not get merge if i go on playing all record at a time single play must only work.

image

#8

@adnan.khan

Hi Adnan

Unfortunately, I am doing all of my Jmix project work next to my regular job, so I have very little extra time for assisting everyone; therefore, I cannot really deep dive into your use cases and make the proper suggestions. You can certainly use the audio class in a browse (list) screen. You may be able to add a slider (https://demo.jmix.io/sampler/#main/5/sample?id=slider-simple), instead of a progress bar, to your table (list) in order to control your playback, by using a generated column but I have no experience in this area with this type of component. Maybe this example will give you some ideas: https://demo.jmix.io/sampler/#main/3/sample?id=table-generated-column
Avoiding simultaneous audio playback should be possible. If something is already playing, you could open a dialog upon another request and ask the user if they want to replace the current audio with the newly selected one. Those are my only thoughts for now. I hope that they are helpful. Good luck with everything.

Best regards
Chris

1 Like
#9

Hi,

I am trying to add forward and backward buttons to skip audio for some seconds, I am trying to calculate audio time during the StreamResource process. Can you share any idea which method will help in finding the current audio playtime so that based on that I will try to add 10 sec for forwarding the audio or minus 10 sec for reverse audio?

#10

@adnan.khan

Hi Adnan

Unfortunately, I do not have any experience in this area but maybe the Vaadin AudioPlayer Add-on code here can give you some ideas:

Good luck!

Best regards
Chris

1 Like