如何在 Vaadin 14 中播放声音？
Posted
技术标签:
【中文标题】如何在 Vaadin 14 中播放声音？【英文标题】：How to play sound in 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 元素来说更好更容易。不要听从我创建聚合物模板的建议。您只需要对更复杂的事情执行此操作。
【参考方案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 类型，如此处所述***.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");
希望它对某人有所帮助。
【讨论】：
以上是关于如何在 Vaadin 14 中播放声音？的主要内容，如果未能解决你的问题，请参考以下文章