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

【问题标题】：How to play .mp3 files in Vaadin 14如何在 Vaadin 14 中播放 .mp3 文件
【发布时间】：2020-11-12 13:37:18
【问题描述】：

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

【问题讨论】：

“什么都没有发生”是什么意思？您的代码是否遇到异常？它会终止吗？它被冻结了吗？它找到音乐文件吗？ ...
您显示了控件，但是您是否在从这些控件运行的每个操作上添加了任何侦听器？我在你的代码中看不到任何关于播放音乐的内容。
@Stultuske 我的代码没有遇到异常。我按下白色三角形，没有声音出现。
@BenjaminD 来自Component类的代码extends
@DanielMårtensson 是的，好的，但是您的代码有什么作用吗？这是本杰明问的。是否有附加的侦听器会真正触发您的代码播放 mp3 文件？

标签： java vaadin mp3 vaadin14

【解决方案1】：

您的方法应该可行，我只是创建了 a PR to the Vaadin cookbook 并为此提供了配方。

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

查看the ways of importing in 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);
}

【讨论】：

我可以听这些来自localhost:8080/audio/myMp3File.mp3 的.mp3 歌曲但是在vaadin，没有
好的！现在它工作了 50%。首先，如果我想收听http://localhost:8080/audio/Un peu.mp3，那么我必须进入我的网络浏览器并手动输入网址http://localhost:8080/audio/Un peu.mp3。然后我可以通过 Vaadin 的媒体播放器收听http://localhost:8080/audio/Un peu.mp3。这一定是个bug？对吗？
不确定问题的原因是什么，您收到 416 错误，为此我在互联网上找到了一些相关问题，但与您的情况不太匹配。无论如何，我用解决方法更新了我的答案。
还有一个问题。我真的需要META-INF 中的文件吗？我不能把它们保存在项目文件夹中吗？
使用这种方法，您可以在任何地方拥有它们，只要它们在类路径中。