如何在 Vaadin 14 中播放声音？

Question

我想在我使用 Vaadin 14 开发的应用程序之一中播放声音（.wav，如 byte[]）。不幸的是，我没有找到这个用例的组件。

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>

是否还有 "Vaadin 14" 解决方案？

Answer 1

正如我们在评论中提到的，V14 中没有开箱即用的组件，但是按照此处所述制作自己的组件非常容易：Creating a Simple Component Using the Element 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);

我本地没有任何音乐文件，所以从互联网上随机取了一些作为源传递。当然，这不是万无一失的解决方案，只是概念验证:)

Answer 2

我想在 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

Answer 3

我也会对 Anasmi 的回答做一点补充——如果你想故意播放声音（比如当点击按钮或类似的东西时），你可以通过这种方式添加方法播放：

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

希望对大家有所帮助。

如何在 Vaadin 14 中播放声音？

How to play sound in Vaadin 14?

java

vaadin

html5-audio

vaadin14