Как воспроизвести звук в Vaadin 14? - PullRequest
Новая
       18

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

0 голосов
/ 30 сентября 2019

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

Vaadin 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>

Есть ли для этого решение «Ваадин 14»?

Ответы [ 3 ]

7 голосов
/ 30 сентября 2019

Как мы упоминали в комментариях, в 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);

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

2 голосов
/ 30 сентября 2019

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

Anasmi's 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
0 голосов
/ 08 октября 2019

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

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

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

...