时间戳

首页 > 解决方案 > 如何在 Vaadin 14 中播放 .mp3 文件

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

问题描述

我想在 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 文件。

标签： javavaadinmp3vaadin14

解决方案

您的方法应该可行，我只是为 Vaadin 食谱创建了一个 PR，并附有此食谱。

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

查看Vaadin 中的导入方式，了解文件的放置位置，尤其是静态文件的资源备忘单。

编辑：

我不确定为什么您的文件在第一次尝试时不起作用，但我可以在您的项目中重现它，也可以使用我自己的 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);
}

推荐阅读