How to play sound in Vaadin 14?

vaadin 14 tutorial
vaadin 14 components
vaadin components
vaadin 15
vaadin-themes
vaadin flow
vaadin number field
vaadin spring security

I want to play sound (.wav, as byte[]) in one of my apps I develop using Vaadin 14. Unfortunately I did not find a component for this use case.

Vaadin 8 offered Audio (https://vaadin.com/api/framework/8.5.2/com/vaadin/ui/Audio.html) but it is not available in Vaadin 14.

I think there is a solution by simply using HTML <audio> and import this.

<body>
  <audio src="test.wav" controls autoplay loop>
    </audio>
</body>

Is there also a "Vaadin 14"-solution for this?

As we mentioned in comments, there is no out-of-the-box component in V14, but it's quite easy to make an own one as described here : Creating a Simple Component Using the Element API :)

So I've checked it briefly and this seems to work:

AudioPlayer.java

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

@Tag("audio")
public class AudioPlayer  extends Component {

    public AudioPlayer(){
        getElement().setAttribute("controls",true);

    }

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

Using:

AudioPlayer player=new AudioPlayer();
player.setSource("https://file-examples.com/wp-content/uploads/2017/11/file_example_WAV_1MG.wav");
add(player);

I don't have any music file locally, so taken some random one from internet and passed as a source. That's, of course, not a bulletproof solution, just a proof of concept : )

Audio | 04. Framework | Forum, To show notification is not big deal, but i want also play sound. I found Audio class very useful but my problem is i cant find place where to attach my Audio  Vaadin component for playing mp3 sounds. With SoundPlayer component you can play sounds in the users browser. Sounds must be in MP3 format. Component API features: load, stop, play, pause and a listener callback interface for player state changes.

I want to add a short addition to anasmi's great answer for those who may use streams.

Anasmi's AudioPlayer.java:

public void setSource(final AbstractStreamResource resource) {
    getElement().setAttribute("src", resource);
}

To make it work on mobile you may have to set the content type for the stream:

var stream = new StreamResource("foo", () -> {
                        byte[] data = getBytesFromFileMP3(soundfile);
                        return new ByteArrayInputStream(data); })
                        .setContentType("audio/mpeg"); // For MP3

SoundPlayer | Vaadin Directory, Sounds must be in MP3 format. Component API features: load, stop, play, pause and a listener callback interface for player state changes. A short video walkthrough of how to set up a Vaadin 14 project: what you need on your computer, how to run the app, and how to debug. Links: https://vaadin.c

I would make a little addition to Anasmi's answer too - if you want to play the sound on purpose (like when clicked on a button or something like that), you can add method play in this way:

public void play() {
    getElement().callJsFunction("play");
}

Hope it helps someone.

AudioPlayer Add-on | Vaadin Directory, It also supports server-side control of the audio playback such as audio and stereo balance, as well as V14 compatibility mode (Polyme 2 + Bower) release. Vaadin 14 uses Web Components, a set of W3C standards which replace the older GWT components used in Vaadin 6, 7, and 8. Vaadin 14 developers benefit from the openness of Web Components by being able to integrate a broader collection of reusable components in their applications and running on the latest browsers.

serverside generated audio playback in Vaadin 10, Hi, Using Vaadin 8 I was playing back an audio file, which was generated by the server using this: ``` Audio tempAudio; StreamResource  Vaadin is an open source technology to create rich internet web content. It is based on Java and supports Java Script and Ajax. This can be extended with Google Web Tool to support extra features in the client browser. Vaadin framework provides features that lets you to develop web content without using HTML, XML etc.

Audio, TouchKit, and Mobile Devices, I have tried adding an Audio component to play the appropriate mp3 file to alert the I can place the same component in the desktop UI, and the sound plays  Vaadin 14 apps are Progressive Web Applications by default. This allows your users to install them on their computers or mobile devices for easy access. You can customize how the application handles offline situations to provide a smooth app-like experience. Future-proof. Vaadin 14 will receive updates until 2024 – 5 years from release.

How to import mp3 files or else | 03. Vaadin Flow | Forum, I want to implement an audio component to play a notification sound on a user action. The MP3 file isn't played by the audio HTML tag. My tag  Web applications can display various resources, such as images, other embedded content, or downloadable files, that the browser has to load from the server. Image resources are typically displayed with the Image component or as component icons.

Comments
  • As noticed in migration guide here : vaadin.com/docs/v14/flow/migration/5-components.html, it's exactly the solution- using a <audio> native element. So you are doing it right :)
  • You could create your own Audio component using the <audio> html code as template. I'm not writing an answer as I have never done that myself and could not help further than pointing in the right direction. There is quite some documentation about it.
  • I stand corrected - anasmis approach (see his answer) is much better and easier for this "simple" html element. Do not follow my suggestion of creating a polymer template. You would need to do this only for more complex things.
  • Thank you so much for this great answer! It works like a charm. I am still pretty new to Vaadin and your example did so much more than simply solving my issue. Now that I see your example the @Tag makes so much sense...
  • Your solution works perfectly on desktop browser but does not work on mobile - any idea why?
  • Could you try to replace with an url from my example in test purposes. Does it work in this case?
  • Alright :/ Similar issues seem to be reported through years. Could you try , first, setting MIME type as discussed here stackoverflow.com/questions/26406923/…?
  • Hehe I found a fix! You have to set the ContentType for the stream to make it work. I will add it to my comment below. Thank you so much for your help again!