2

我想在我使用 .wav 开发的一个应用程序中播放声音（.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>

是否还有“Vaadin 14”解决方案？

4

3 回答 3

11

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

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

于 2019-09-30T12:29:24.280 回答
5

对于那些可能使用流的人，我想为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
于 2019-09-30T12:57:32.807 回答
3

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

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

希望它可以帮助某人。

于 2019-10-08T20:03:37.397 回答