可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am looking for a mechanism to display a media player with multiple sources MP3 (attached image).

Using primefaces there is the tag:

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

But it allows to have only one piece at a time.

回答1:

I've had good results with Wikplayer. It may not be exactly what you're looking for, but it's completely client-side (ie: JavaScript) and continues playing as you change pages on the site. And yes, it does allow multiple files.

For example, the default settings produces the following code:

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

The contents of data-config is:

{
  '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'
    }
  ]
}

It's pretty obvious what most of these settings do, and to add more tracks all you have to do is add more objects the the playlist array, specifying the title and url as URL encoded parameters each time.

回答2:

I share with you the solution I found

in the bean I generate a JSON string like this :

@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;
} }

and in the XHTML page I call the json attribut by El Expression :

<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>