Question

我正在寻找一种机制来显示具有多个源MP3（附加图像）的媒体播放器。

使用primefaces有标签：

<p:media value="http://www.stephaniequinn.com/Music/Mozart%20-%20Presto.mp3" width="200" height="20" player="quicktime" />

但它允许一次只有一件。

Answer 1

我与Wikplayer取得了不错的成绩。它可能不是您正在寻找的，但它完全是客户端（即：JavaScript），并在您更改网站上的页面时继续播放。是的，它确实允许多个文件。

例如，默认设置会生成以下代码：

<script type="text/javascript" src="http://www.wikplayer.com/code.js" data-config=" ... " ></script>

data-config的内容是：

{
  'skin': 'skins/wikfull/funkyBlue/skin.css',
  'volume': 50,
  'autoplay': false,
  'shuffle': false,
  'repeat': 0,
  'showcomment': false,
  'marqueetexton': true,
  'placement': 'top',
  'showplaylist': false,
  'playlist': [
    {
      'title': '(SAMPLE)%20Canon%20in%20D%20-%20Pachelbel',
      'url':'http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DMK6heUdRr-E'
    }
  ]
}

很明显大多数这些设置的作用，并且要添加更多曲目，您只需在playlist数组中添加更多对象，指定title和{{ 1}}每次都作为URL编码参数。

Answer 2

我与您分享我找到的解决方案

在bean中我生成一个像这样的JSON字符串：

@ManagedBean public class AudioBean {

private String json = "[{'title':'MUSIC CALME','url':'http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DMK6heUdRr-E'},"
        + "         {'title':'Selena Gomez - Come & Get It','url':'https://www.youtube.com/watch?v=n-D1EB74Ckg&list=RDn-D1EB74Ckg'},"
        + "     {'title':'Demi Lovato - Heart Attack','url':'https://www.youtube.com/watch?v=AByfaYcOm4A&index=3&list=RDn-D1EB74Ckg'}]";

public String getJson() {
    return json;
}

public void setJson(String json) {
    this.json = json;
} }

在XHTML页面中，我通过El Expression调用json attribut：

<body>
<script type="text/javascript" src="http://www.wikplayer.com/code.js"
    data-config="{'skin':'skins/wikfull/ribbonRed/skin.css','volume':62,'autoplay':true,'shuffle':true,'repeat':0,'showcomment':false,'marqueetexton':true,'placement':'top','showplaylist':false,
    'playlist':
        #{audioBean.json}
}">
</script>

如何添加具有多个源mp3的媒体播放器

2 个答案: