Difference between revisions of "Integrated mp3 player for mythweb"

From MythTV Official Wiki
Jump to: navigation, search
(Generate Playlist)
 
(6 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
The purpose of this modification is two fold:
 
The purpose of this modification is two fold:
 
* Eliminate the need for a local media player to play music (good for public access machines)
 
* Eliminate the need for a local media player to play music (good for public access machines)
* Eliminate time spend individually adding URLs to a playlist
+
* Eliminate time spent individually adding URLs to a playlist
  
 
The inspiration came from [http://www.mythtv.org/wiki/index.php/Stream_mythtv_recordings_from_mythweb_using_flash_video this modification].  This mod is no official and is not supported by the authors of MythTV, MythWeb, or MythMusic.
 
The inspiration came from [http://www.mythtv.org/wiki/index.php/Stream_mythtv_recordings_from_mythweb_using_flash_video this modification].  This mod is no official and is not supported by the authors of MythTV, MythWeb, or MythMusic.
Line 16: Line 16:
 
The player used for this project is [http://www.jeroenwijering.com/?item=Flash_MP3_Player Flash MP3 Player 3.6] by Jeroen Wijering.  The [http://musicplayer.sourceforge.net/ XSPF Web Music Player] was also tried, and can easily be adapted to this mod.
 
The player used for this project is [http://www.jeroenwijering.com/?item=Flash_MP3_Player Flash MP3 Player 3.6] by Jeroen Wijering.  The [http://musicplayer.sourceforge.net/ XSPF Web Music Player] was also tried, and can easily be adapted to this mod.
  
The player (mp3player.swf) was installed to /mythweb/data and the flash loader (ufo.js) was installed to /mythweb/js.
+
The player (mp3player.swf) was installed to /mythweb/data and the flash loader (ufo.js) was installed to /mythweb/js.  If not included with the player, UFO can be found [http://www.bobbyvandersluis.com/ufo/ here].
  
 
= Load flash loader =
 
= Load flash loader =
 
Around line 38, add a line to load the flash loader javascript file (UFO.js).
 
Around line 38, add a line to load the flash loader javascript file (UFO.js).
{{Box File|/mythweb/modules/_shared/tmpl/default/header.php|
+
{{PHP|/mythweb/modules/_shared/tmpl/default/header.php|
 
<pre>
 
<pre>
 
<script type="text/javascript" src="<?php echo root ?>js/ufo.js"></script>
 
<script type="text/javascript" src="<?php echo root ?>js/ufo.js"></script>
Line 28: Line 28:
 
= Generate Playlist =
 
= Generate Playlist =
 
Inside class mythMusic, function display()
 
Inside class mythMusic, function display()
{{Box File|/mythweb/modules/music/handler.php|
+
{{PHP|/mythweb/modules/music/handler.php|
 
<pre>
 
<pre>
 
//Before first if-statement, initialize the playlist
 
//Before first if-statement, initialize the playlist
Line 38: Line 38:
 
//Inside while loop, write song data
 
//Inside while loop, write song data
 
                 fwrite($file,"  <track>\n");
 
                 fwrite($file,"  <track>\n");
                 fwrite($file,"  <location>" . $this->urlfilename . "</location>\n");
+
                 fwrite($file,"  <location>http://" . $_SERVER['SERVER_NAME'] . $this->urlfilename . "</location>\n");
 
                 fwrite($file,"  <creator>" . $this->artist . "</creator>\n");
 
                 fwrite($file,"  <creator>" . $this->artist . "</creator>\n");
 
                 fwrite($file,"  <title>" . $this->title . "</title>\n");
 
                 fwrite($file,"  <title>" . $this->title . "</title>\n");
Line 52: Line 52:
  
 
= Load mp3 player =
 
= Load mp3 player =
 +
==Version 1==
 +
Player is integrated into the MythWeb Music page.<br>
 
Inside class Theme_music, new function printPlayer()
 
Inside class Theme_music, new function printPlayer()
{{Box File|/mythweb/modules/music/tmpl/default/music.php|
+
{{PHP|/mythweb/modules/music/tmpl/default/music.php|
 
<pre>
 
<pre>
 
     function printPlayer() {
 
     function printPlayer() {
Line 67: Line 69:
  
 
Inside class Theme_music, function print_header()
 
Inside class Theme_music, function print_header()
{{Box File|/mythweb/modules/music/tmpl/default/music.php|
+
{{PHP|/mythweb/modules/music/tmpl/default/music.php|
 
<pre>
 
<pre>
 
//Around line 205, after "$this->printNavBar();"
 
//Around line 205, after "$this->printNavBar();"
 
$this->printPlayer();
 
$this->printPlayer();
 +
</pre>
 +
}}
 +
 +
==Version 2==
 +
Player is opened in a separate window.<br>
 +
I didn't like how I had to stay in the same page or else it would halt playback.  I moved the player to a separate page that can be reloaded with the current playlist at leisure.
 +
 +
New file, mp3player.html
 +
{{Code box|/mythweb/data/mp3player.html|
 +
<pre>
 +
<html>
 +
<head>
 +
<script type="text/javascript" src="/mythweb/js/ufo.js"></script>
 +
</head>
 +
<body>
 +
<p id="player2"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
 +
<script type="text/javascript">
 +
        var FU = { movie:"/mythweb/data/mp3player.swf",width:"390",height:"388",majorversion:"7",build:"0",bgcolor:"#FFFFFF",
 +
                        flashvars:"file=playlist.xspf&lightcolor=0x265990&backcolor=0x002650&frontcolor=0xFFFFFF&displayheight=0&repeat=list&shuffle
 +
        UFO.create(FU,"player2");
 +
</script>
 +
</body>
 +
</html>
 +
</pre>
 +
}}
 +
 +
Inside class Theme_music, function print_header()
 +
{{PHP|/mythweb/modules/music/tmpl/default/music.php|
 +
<pre>
 +
//Around line 185, after "printf("<input TYPE=\"SUBMIT\" NAME=\"updateButton\" VALUE=\"Update\">");"
 +
//Can be moved around wherever desired
 +
printf("<input type=\"button\" value=\"MythWeb Player\" onclick=\"window.open('/mythweb/data/mp3player.html','mythmp3player','width=400,height=400')\">\n");
 
</pre>
 
</pre>
 
}}
 
}}
Line 76: Line 110:
 
= ToDo =
 
= ToDo =
 
* Use randomly chosen (or session tagged) filename for playlist to prevent overwriting with multiple simultaneous sessions.  Alternatively, have a php script pipe the playlist directly into the flash player.
 
* Use randomly chosen (or session tagged) filename for playlist to prevent overwriting with multiple simultaneous sessions.  Alternatively, have a php script pipe the playlist directly into the flash player.
* (AFAIK) Flash cannot dynamically size.  The best option I see for sizing the width right now is to have a javascript grab the window size and scale the player at reload.
+
* (AFAIK) Flash cannot dynamically size.  The best option I see for sizing the width right now is to have a javascript grab the window size and scale the player at reload. (version 1 only)
 +
 
 +
[[Category:HOWTO]]

Latest revision as of 19:12, 2 October 2007

The purpose of this modification is two fold:

  • Eliminate the need for a local media player to play music (good for public access machines)
  • Eliminate time spent individually adding URLs to a playlist

The inspiration came from this modification. This mod is no official and is not supported by the authors of MythTV, MythWeb, or MythMusic.

Prerequisites

Required

  • mythtv
  • mythweb
  • mythmusic

Positions given below were on versions 0.20 of each above.

Install a flash mp3 player

The player used for this project is Flash MP3 Player 3.6 by Jeroen Wijering. The XSPF Web Music Player was also tried, and can easily be adapted to this mod.

The player (mp3player.swf) was installed to /mythweb/data and the flash loader (ufo.js) was installed to /mythweb/js. If not included with the player, UFO can be found here.

Load flash loader

Around line 38, add a line to load the flash loader javascript file (UFO.js).

Php.png /mythweb/modules/_shared/tmpl/default/header.php

<script type="text/javascript" src="<?php echo root ?>js/ufo.js"></script>

Generate Playlist

Inside class mythMusic, function display()

Php.png /mythweb/modules/music/handler.php

//Before first if-statement, initialize the playlist
        $file = fopen("data/playlist.xspf","w");
        fwrite($file,"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n");
        fwrite($file,"<playlist version=\"0\" xmlns=\"http://xspf.org/ns/0/\">\n");
        fwrite($file," <trackList>\n");

//Inside while loop, write song data
                fwrite($file,"  <track>\n");
                fwrite($file,"   <location>http://" . $_SERVER['SERVER_NAME'] . $this->urlfilename . "</location>\n");
                fwrite($file,"   <creator>" . $this->artist . "</creator>\n");
                fwrite($file,"   <title>" . $this->title . "</title>\n");
                fwrite($file,"  </track>\n");

//After first if-statement, close the playlist
        fwrite($file," </trackList>\n");
        fwrite($file,"</playlist>\n");
        fclose($file);

Load mp3 player

Version 1

Player is integrated into the MythWeb Music page.
Inside class Theme_music, new function printPlayer()

Php.png /mythweb/modules/music/tmpl/default/music.php

    function printPlayer() {
        printf("<p id=\"player2\"><a href=\"http://www.macromedia.com/go/getflashplayer\">Get the Flash Player</a> to see this player.</p>\n");
        printf("<script type=\"text/javascript\">\n");
        printf("  var FU = { movie:\"/mythweb/data/mp3player.swf\",width:\"1000\",height:\"135\",majorversion:\"7\",build:\"0\",bgcolor:\"#265990\",\n");
        printf("      flashvars:\"file=/mythweb/data/playlist.xspf&lightcolor=0x265990&backcolor=0x002650&frontcolor=0xFFFFFF&displayheight=0\" };\n");
        printf("  UFO.create(FU,\"player2\");\n");
        printf("</script>\n");
    }

Inside class Theme_music, function print_header()

Php.png /mythweb/modules/music/tmpl/default/music.php

//Around line 205, after "$this->printNavBar();"
$this->printPlayer();

Version 2

Player is opened in a separate window.
I didn't like how I had to stay in the same page or else it would halt playback. I moved the player to a separate page that can be reloaded with the current playlist at leisure.

New file, mp3player.html

Script.png /mythweb/data/mp3player.html

<html>
<head>
<script type="text/javascript" src="/mythweb/js/ufo.js"></script>
</head>
<body>
<p id="player2"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
<script type="text/javascript">
        var FU = { movie:"/mythweb/data/mp3player.swf",width:"390",height:"388",majorversion:"7",build:"0",bgcolor:"#FFFFFF",
                        flashvars:"file=playlist.xspf&lightcolor=0x265990&backcolor=0x002650&frontcolor=0xFFFFFF&displayheight=0&repeat=list&shuffle
        UFO.create(FU,"player2");
</script>
</body>
</html>

Inside class Theme_music, function print_header()

Php.png /mythweb/modules/music/tmpl/default/music.php

//Around line 185, after "printf("<input TYPE=\"SUBMIT\" NAME=\"updateButton\" VALUE=\"Update\">");"
//Can be moved around wherever desired
printf("<input type=\"button\" value=\"MythWeb Player\" onclick=\"window.open('/mythweb/data/mp3player.html','mythmp3player','width=400,height=400')\">\n");

ToDo

  • Use randomly chosen (or session tagged) filename for playlist to prevent overwriting with multiple simultaneous sessions. Alternatively, have a php script pipe the playlist directly into the flash player.
  • (AFAIK) Flash cannot dynamically size. The best option I see for sizing the width right now is to have a javascript grab the window size and scale the player at reload. (version 1 only)