HTML5 <audio> element is not supported in Jmix 2.x.x

Support
#1

Hello Jmix Team

According to the Vaadin documentation here: Components in Vaadin platform | Migrating from Vaadin 8 to Vaadin 10 | Flow | Vaadin 10 Docs the Vaadin Audio component in version 8 was replaced by the native HTML5 <audio> (HTML5 audio - Wikipedia ) element in Vaadin 10 and beyond.

Unfortunately, the <audio> element is not supported in Jmix 2.x.x, incl. Studio. (In this post you will find an example of my Jmix 1.5.x implementation: Mp3 or Wav file audio play on browse screen - #6 by chrisbeaham) I have looked at some alternatives for Jmix 2.x.x but they require a large library of other components and I was not able to get any compiled yet due to various errors, so the effort needed to add them to my project is very hard to justify. Maintaining them after the initial implementation is an important consideration that also needs justification.

My expectation is that <audio> should be supported in Jmix along with all of the other HTML5 elements. Can you please give me feedback concerning when it could become available, or if there is a recommended temporary or permanent alternative.

Thanks in advance for your support.

Best regards
Chris

#2

Hi Chris,

Jmix does not provide ready-made components for audio. However, you can easily implement your own component using the Vaadin Element API.
See this doc: Creating a Simple Component Using the Element API | Creating Components | Flow | Vaadin 14 Docs

Example:

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Tag;

@Tag("audio")
public class Audio extends Component {
    public Audio() {
        getElement().setAttribute("controls", true);
    }

    public String getSource() {
        return getElement().getProperty("src");
    }

    public void setSource(String source) {
        getElement().setProperty("src", source);
    }
}

        return new ComponentRenderer<>(value -> {
            Audio audio = new Audio();
            audio.setSource("https://download.samplelib.com/mp3/sample-15s.mp3");
            return audio;
        });

изображение

Regards,
Sergey.

1 Like
#3

@fedorov

Hi Sergey

Thank you for the information and your efforts. I already tried to use this same Vaadin code (first example in your post) without success, as my understanding was and is, that the @Tag("audio") annotation must correspond to a HTML5 <audio/> element in my view descriptor, so that the browser can render the proper component and provide the playback functionality. However, when I added an <audio/> component to a DetailView XML descriptor, Studio did not understand it:

Screenshot 2024-03-04 at 22.41.57.pxd

and when I ran my application, I received this exception:

Screenshot 2024-03-04 at 22.44.19.pxd

These are the reasons why I created this post.

Furthermore, I do not understand how the ComponentRenderer, in your second piece of code, should know what to do, since there is no UI description of this audio component, containing its controls or status information, anywhere.

Can you please give me more feedback concerning this. Thank you in advance.

Best regards
Chris

#4

In my example I created the component in the ComponentRenderer to add it as a column of DataGrid.

To use the component in view descriptors you need the full implementation of custom component. See this sample: https://demo.jmix.io/ui-samples/sample/composite-component.

You can see the example of creating a simple component for <audio/> tag in the demo project attached below.
audio-demo.zip (114.7 KB)

1 Like
#5

@fedorov

Hello Sergey

Thank you very much for your support and especially for the example project/implementation; it helped me considerably.

I have migrated it to Jmix 2.2.0 and expanded on your static URL example to include:

  • uploaded files using the <audio> element’s internal controls and
  • uploaded files using the <audio> with external controls (normal buttons)

Please see the attached file with all three use cases implemented:
audio-demo.zip (127.5 KB)

Unfortunately, I constantly receive this exception…

java.io.IOException: Broken pipe
at java.base/sun.nio.ch.FileDispatcherImpl.write0(Native Method) ~[na:na]
at java.base/sun.nio.ch.SocketDispatcher.write(SocketDispatcher.java:62) ~[na:na]
at java.base/sun.nio.ch.IOUtil.writeFromNativeBuffer(IOUtil.java:132) ~[na:na]
at java.base/sun.nio.ch.IOUtil.write(IOUtil.java:97) ~[na:na]
at java.base/sun.nio.ch.IOUtil.write(IOUtil.java:53) ~[na:na]
at java.base/sun.nio.ch.SocketChannelImpl.write(SocketChannelImpl.java:532) ~[na:na]

and my uploaded file never plays to its end; at some point it stops and begins automatically at the beginning of the file (stream). Therefore, I cannot use this implementation currently.

I have looked at the suggestions and source code for several other implementations (partial URL list below), which everyone claims to function correctly, including the original Vaadin 6, 7, 8 code here:

but I am currently not able to solve these issues.

I have already spent much too much time on something, which used to work straight out of the box with CUBA and Jmix 1.5.x (Vaadin 8), so I am going to abandon it for a while and continue my other Jmix 1.5.x to 2.2.x migration tasks; otherwise, I will never be finished.

I am still convinced that Jmix would be better off to properly support this functionality with a standard implementation, in order to avoid having everyone reinvent the wheel and have migration problems in the future with different non-standard implementations, which may or may not have stability problems affecting the entire application. This would save everyone time and money.

I will pickup this topic again sometime later. Thanks again.

Best regards
Chris

1 Like