How do I get title of the currently playing song in jplayer live audio streaming

Bibhudutta Dash

unread,

May 3, 2014, 3:43:20 AM5/3/14

to jpl...@googlegroups.com

I have created the player using jplayer live streaming audio but I can't fetch the song title which is currently playing. Please help how do i detect the song title.

Radet Hong

unread,

May 4, 2014, 10:45:54 PM5/4/14

to jpl...@googlegroups.com

this is my example to get the current title of song when you click on play button:
$("#jquery_jplayer_1").jPlayer({
        ready: function (event) {
            $(this).jPlayer("setMedia", {
                title: "Bubble",
                m4a: "http://jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
                oga: "http://jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
            });
        },
        play:function(a){
            console.log(a.jPlayer.status.media.title);
        },
        swfPath: "js",
        supplied: "m4a, oga",
        wmode: "window",
        smoothPlayBar: true,
        keyEnabled: true,
        remainingDuration: true,
        toggleDuration: true
    });

hope it can help you.

Hong Radet
IRG
Web Developer
ra...@myirg.com
Phone: +855 17 570 917 | +855 93 882 645
Tel: +855 23 995 725
Website: www.myirg.com

On Sat, May 3, 2014 at 2:43 PM, Bibhudutta Dash <blbhud...@gmail.com> wrote:

I have created the player using jplayer live streaming audio but I can't fetch the song title which is currently playing. Please help how do i detect the song title.

--
You received this message because you are subscribed to the Google Groups "jPlayer: HTML5 Audio & Video for jQuery" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jplayer+u...@googlegroups.com.
To post to this group, send email to jpl...@googlegroups.com.
Visit this group at http://groups.google.com/group/jplayer.
For more options, visit https://groups.google.com/d/optout.

Fabio

unread,

May 7, 2014, 9:11:54 AM5/7/14

to jpl...@googlegroups.com

Hello Radet,

Probably Bibhudutta is asking how to visualize the title of the song being -streamed- utilizing jPlayer, rather than the titles of the songs that are in your jPlayer playlist?

rwoody

unread,

Jun 6, 2014, 10:18:12 PM6/6/14

to jpl...@googlegroups.com

I think I might be able to assist you here - but at the end of my post I have a question maybe someone can help me with -

I created a separate file to pull the playing info. Now this is for shoutcast, so I'm not sure if you are using that or icecast. I would have to dig around to find the write syntax for icecast - but here you go for shoutcast -

within your player, create an iframe <iframe> code </iframe>

Call you php file inside the iframe -

I call mine playing.php and also associated a separate css file as I also pull in album art - You'll want to remove the album include from your code.

code:

=============================================================
<?php
include_once("get_album_art.php");
$sc_url_ip = "your_url.com"; // <= CHANGE THIS//ex: 6x.3x.18x.14x
$sc_url_port = "9014"; // <= CHANGE THIS//
function getNowPlaying($sc_url_ip,$sc_url_port)
{
    $open = fsockopen($sc_url_ip,$sc_url_port,$errno,$errstr,'.5');
    if ($open)
    {
        fputs($open,"GET /7.html HTTP/1.1\nUser-Agent:Mozilla\n\n");
        stream_set_timeout($open,'1');
        $read = fread($open,200);
        $text = explode(",",$read);
        if($text[6] == '' || $text[6] == '</body></html>'){ $msg = ' live stream '; }
        else { $msg = $text[6]; }
        $text = ' '.$msg;
    }
    else { return false; }
    fclose($open);
    return $text;
}
$current_song = getNowPlaying($sc_url_ip,$sc_url_port);

list($artist,$title) = explode(" - ",$current_song);
$image = GetAlbumArtFromAmazon($artist,'');
?>
<html>
<head>
<link href="css/player.css" rel="stylesheet" type="text/css" />


</head>
<body>
<div id="logo"><img src="images/logo.png" width="172" height="90" alt="My Station"> </div>

<div id="image"><?php if ($image) { echo '<img src="'.$image.'">'; } ?></div>

<div id="now_playing"><?php print $current_song; ?></div>
<br />

</div>
</body>
</html
===================================================

I also add the following to update the playing info within intervals (60 seconds here). I know there is a more elegant way to do this, but I wrote this ages ago, and haven't gotten around to doing it with ajax -

code in your header of your index file

=========================================
<script>
function updatePlaying() {
$.get("playing.php", function(data) {
    $("#playing").html(data);
    window.setTimeout(updatePlaying, 60000);
});
}
updatePlaying();
</script>

===================================================
Now I create a <div> within my html where I want the playing info to be displayed and the size of the iframe:

code

=======================================================

<div id="playing"><iframe src="playing.php" width="260" height="50" frameborder="0" scrolling="no"></iframe></div>

=============================================================================================

Now I have a small problem with the css on my player - I'm currently using the pink flag template that I modified, and I'm trying to scoot the controls up a bit and changes I make seem to make a mess of the controls. Anyone tell me which div within the template's css will do this? I need to move the control (start/pause) up about maybe 5px from where they are so the player fits better on the mobile devices as that is what I've set this up for. Any help would be really appreciated.

Ruth

Reply all

Reply to author

Forward