2

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

enter image description here

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.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Mahmoud
  • 325
  • 10
  • 25

2 Answers2

2

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.

MTCoster
  • 5,868
  • 3
  • 28
  • 49
  • I have the title and the URL stored in the database, it has been there a way to generate it using your method? or is it static? – Mahmoud Oct 23 '15 at 09:56
  • You can create the playlist 'javascript' part in a facelets page. Just search for javascript EL in stackoverflow. E.g. http://stackoverflow.com/questions/16410221/uirepeat-inside-a-javascript – Kukeltje Oct 23 '15 at 09:59
  • I think I found the solution for your proposal. I generated a string that represents a JSON stream and I will place it directly into the script. The script will generate this: [ {'title', 'Title0', 'url': url 0 '}, {'title', 'Title1', 'url': url 2 '}, {'title', 'Title2', 'url': url 3 '} ] – Mahmoud Oct 23 '15 at 10:07
0

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>

Mahmoud
  • 325
  • 10
  • 25