如何在Vaadin 14中播放.mp3文件

Question

我想在 Vaadin 14 中播放 .mp3 文件。这是我的音频播放器。

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Tag;

@Tag("audio")
public class AudioPlayer  extends Component {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    public AudioPlayer(){
        getElement().setAttribute("controls",true);

    }

    public  void setSource(String path){
        getElement().setProperty("src",path);
    }
}

AudioPlayer player = new AudioPlayer();
player.setSource("music/my music file.mp3");
add(player);

但是当我尝试播放 .mp3 文件时，没有任何反应。我错过了什么？我需要先将 .mp3 文件转换为 .wav 文件吗？我怎样才能做到这一点只是暂时的。我不打算在计算机上保存任何 .wav 文件，因为我已经存储了 .mp3 文件。

Answer 1

你的方法应该行得通，我只是创建了 a PR to the Vaadin cookbook 和一个食谱。

请注意，浏览器需要能够通过同一路径访问音频文件。如果您将 src 设置为 audio/mysong.mp3，那么您应该也可以在浏览器中打开它，例如localhost:8080/audio/mysong.mp3（或等价于您的设置的 URL）。

查看 the ways of importing in Vaadin 以了解将文件放在哪里，特别是 Resource Cheat Sheet 用于静态文件。

编辑：

我不确定为什么你的文件在第一次尝试时不起作用，但我可以在你的项目中重现它，也可以使用我自己的 mp3 文件。您可以在控制台中看到错误 416，这与请求的字节范围不匹配有关。

我找到了一个您可以尝试的解决方法（您可能想为此将音频移动到 src/main/resources，and/or 更新 AudioPlayer 以接受 AbstractStreamResource):

if(!reverseTranslation.getValue()) {
    frenchSentence.setValue(sentenceInFrench);
    String audioPath = "/META-INF/resources/audio/" + sentenceInFrench + ".mp3";
    
    AbstractStreamResource resource =
            new StreamResource(sentenceInFrench, () -> getClass().getResourceAsStream(audioPath));
    player.getElement().setAttribute("src", resource);
}

如何在Vaadin 14中播放.mp3文件

How to play .mp3 files in Vaadin 14

java

vaadin

mp3

vaadin14