如何在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

您的方法應該有效，我只是為 Vaadin 食譜創建了一個 PR，其中包含一個食譜。

請注意，瀏覽器需要能夠通過同一路徑訪問音頻文件。 如果您將src設置為audio/mysong.mp3 ，那么您應該也可以在瀏覽器中打開它，例如localhost:8080/audio/mysong.mp3 （或等效的 URL 用於您的設置）。

看看在 Vaadin 中導入的方法，看看將文件放在哪里，特別是 static 文件的資源備忘單。

編輯：

我不確定為什么你的文件在第一次嘗試時不起作用，但我可以在你的項目中重現它，也可以使用我自己的 mp3 文件。 您可以在控制台中看到錯誤 416，這與請求的字節范圍不匹配有關。

我找到了一個您可以嘗試的解決方法（您可能想為此將音頻移動到src/main/resources ，和/或更新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);
}