Enhancement request: Add HTML5 audio tag so that mpd stream can play in brower

[GoogleCodeExporter]

It might be nice when using client175 to be able to play the mpd httpd output 
stream right in the browser window.  The HTML5 audio tag should be ideal for 
this purpose.

Pro:
A separate audio player does not have to be open in addition to the web browser.

Con:
Some strange behavior occurs with every combination of stream format and web 
browser I have tried so far.

Details:
Please note that I have configured mpd to produce an httpd output on port 8001. 
 In order to test the HTML5 audio tag, I added the following code to the 
static, index html file (client175_0.4/static/index.html):

<audio src="http://127.0.0.1:8001" autoplay="autoplay" preload="none"></audio>

Everything works as expected at first.

A problem I experienced is that the browser often stops playing the stream 
after the end of each song.  I think the metadata send at the beginning of each 
new song might be causing the problem because mplayer also occasionally has a 
problem as well.  I contemplated automatically refreshing the frame with the 
audio tag but think that the buffering would then cut off the beginning of each 
song.  The problem seems to happen when the stream is vorbis rather than lame 
encoded, but in testing Firefox, Internet Explorer, and Chrome, only Chrome 
appears to be able to play an mp3 encoded stream.

Presumably there would be a checkbox or something similar to enable or disable 
the HTML5 audio tag.

Original issue reported on code.google.com by ajn...@gmail.com on 20 Dec 2010 at 5:58

[GoogleCodeExporter]

I was thinking along the same lines.  We might get better results not using 
autoplay but responding to mpd's state events to start the stream:

mpd.events.on('state', function(){
    if(mpd.status.state == 'play'){
        ...
    }
})

I'll give it a try myself this week.

Original comment by cseic...@gmail.com on 20 Dec 2010 at 5:07

• Changed state: Accepted
• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

I have added audio streaming via the html5 Audio() API to svn.  There is a new 
icon in the upper right hand corner for options.  Tested in chrome on linux.

The problem is, the current html5 implementation does not support chained ogg 
streams, which is why the stream stops when switching songs.  To workaround 
this, client175 will start a new stream on every song change.  

Consider this a proof of concept for now.  When browser support improves, I 
will revisit this feature.  I'll leave the issue open as a reminder...

Original comment by cseic...@gmail.com on 24 Dec 2010 at 8:20

• Added labels: Priority-Low
• Removed labels: Priority-Medium

[GoogleCodeExporter]

Thanks for attempting this.  I think you're right about waiting for browser 
support.  Anyway, thanks again for client175.

Original comment by ajn...@gmail.com on 7 Jan 2011 at 4:51

[GoogleCodeExporter]

I love client175's interface, and it has an amazing feature set. This was the 
one sticking point - I wanted to be able to stream the media to any browser. 
Now I hate flash as much as everyone (I have it disabled by default in my 
browser) but until HTML5 catches up we can use Flash to handle this. I'll post 
here for anyone else who wants this functionality, I don't expect it to be 
included in the standard build because Flash is annoying.

 - Download a copy of FFMp3 from http://ffmp3.sourceforge.net/
 - Put the file "ffmp3.swf" into your static folder
 - You can use the form on the download page to put in your stream details. Specific points to watch for are the "Audio Codec" (if you haven't changed anything in mpd, it should be OGG) and "Auto Play" functionality.
 - Copy this code into the body of index.html in the static folder
 - Wrap it in a <div> tag so that we can position it.
 - - If you want it to be positioned at the bottom of the window, use "position:absolute; bottom:0;"
 - - If you don't want to see it, put "margin-left: -500px" (just to move it offscreen)
 - - Don't put display:none or any variant, because then the flash will not load.

This setup works fairly nicely, with the only understandable caveat that there 
is a delay between the client175 interface and the streaming feed based on your 
bandwidth.   

Original comment by bora...@gmail.com on 27 Jan 2011 at 8:48

[GoogleCodeExporter]

This flash method works better in my testing than the html5 method does 
currently.  Thanks for the clearly-written instructions.

Original comment by ajn...@gmail.com on 31 Jan 2011 at 11:06

[GoogleCodeExporter]

I think I'm using version 0.7 but not sure.
Just reporting that the audio tag does work in this version.
Depending on the browser, your http stream should be mp3 or ogg.

According to http://html5doctor.com/native-audio-in-the-browser/ :

ogg: FF3.6, Chrome6, Opera10.5+
mp3: Safari5+, Chrome6, IE9beta

Original comment by jeroen.o...@gmail.com on 26 Dec 2011 at 2:32