Как воспроизводить звук в Vaadin 14?

Я хочу воспроизводить звук (.wav, как byte[]) в одном из моих приложений, которые я разрабатываю с помощью Vaadin 14. К сожалению, я не нашел компонента для этого варианта использования.

Ваадин 8 предложил Audio(https://vaadin.com/api/framework/8.5.2/com/vaadin/ui/Audio.html), но он недоступен в Vaadin 14.

Я думаю, что есть решение, просто используя HTML <audio> и импортируйте это.

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

Есть ли также решение "Vaadin 14" для этого?

Источник

3 ответа

Решение

Как мы упоминали в комментариях, в V14 нет готового компонента, но довольно легко сделать собственный, как описано здесь: Создание простого компонента с помощью API элементов:)

Итак, я проверил это вкратце, и, похоже, это работает:

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);
    }
}

С помощью:

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

У меня нет локального музыкального файла, поэтому я взял какой-то случайный из Интернета и передал его в качестве источника. Это, конечно, не пуленепробиваемое решение, а просто доказательство концепции:)

Источник

Я хочу добавить небольшое дополнение к anasmi для тех, кто может использовать потоки.

AudioPlayer.java Анасми:

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

Чтобы он работал на мобильных устройствах, вам может потребоваться установить тип контента для потока:

var stream = new StreamResource("foo", () -> {
                        byte[] data = getBytesFromFileMP3(soundfile);
                        return new ByteArrayInputStream(data); })
                        .setContentType("audio/mpeg"); // For MP3
Источник

Я бы также сделал небольшое дополнение к ответу Анасми - если вы хотите специально воспроизвести звук (например, при нажатии кнопки или что-то в этом роде), вы можете добавить метод play следующим образом:

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

Надеюсь, это кому-то поможет.

Источник
Другие вопросы по тегам