如何在 Vaadin 14 中播放声音？答案

【问题标题】：How to play sound in Vaadin 14?如何在 Vaadin 14 中播放声音？
【发布时间】：2019-09-30 11:45:23
【问题描述】：

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

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”解决方案？

【问题讨论】：

正如迁移指南中所述：vaadin.com/docs/v14/flow/migration/5-components.html，这正是使用<audio> 原生元素的解决方案。所以你做对了:)
您可以使用<audio> html 代码作为模板创建自己的Audio 组件。我没有写答案，因为我自己从来没有这样做过，除了指出正确的方向之外，我无能为力。有很多关于它的documentation。
我的立场是正确的——anasmis 方法（见他的回答）对于这个“简单”的 html 元素来说更好更容易。不要听从我创建聚合物模板的建议。您只需要对更复杂的事情执行此操作。

标签： java vaadin html5-audio vaadin14

【解决方案1】：

正如我们在 cmets 中提到的，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);

我在本地没有任何音乐文件，因此从互联网上随机获取了一些音乐文件并作为来源传递。当然，这不是一个防弹的解决方案，只是一个概念证明:)

【讨论】：

非常感谢您的出色回答！它就像一个魅力。我对 Vaadin 还是很陌生，你的例子不仅仅是解决我的问题。现在我看到了你的例子，@Tag 非常有意义......
您的解决方案在桌面浏览器上完美运行，但在移动设备上无法运行 - 知道为什么吗？
您能否尝试用我的示例中的 url 替换以进行测试。在这种情况下有效吗？
好吧：/ 类似的问题似乎多年来一直在报告。您可以先尝试设置MIME 类型，如此处所述stackoverflow.com/questions/26406923/…？
呵呵我找到了解决办法！您必须为流设置 ContentType 才能使其工作。我会将其添加到下面的评论中。再次感谢您的帮助！

【解决方案2】：

我想为anasmi 为可能使用流的人提供一个很好的答案添加一个简短的补充。

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

【讨论】：

【解决方案3】：

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

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

希望它对某人有所帮助。

【讨论】：