I had the same problem merging my home made index.php page that is running on port 443 in apache2 on Ubuntu 16.04. I wanted to use my own webpage and pass the "script" of the music stream (non-ssl) and what was currently playing (also non-ssl). What was happening is that everything would work over port 80, but when I switched to port 443, browsers (especially Chrome) would block my "unsecure scripts" and no sound would occur.
So, after searching all over the internet and finding this but not how to do it, I finally got it!
Here is my set up for those interested:
- Icecast 2.4.3 on Windows running on port 8080
- Ubuntu 16.04 LTS running on Oracle VirtualBox with almost 20 websites
- I use MediaMonkey 4.1.16 and a plug-in called "edcast" to connect to Icecast
Apache2 conf file:
<IfModule mod_ssl.c>
<VirtualHost *:443>
ServerName radio.domain.com
DocumentRoot /var/www/radio.domain.com
<Directory /var/www/radio.domain.com>
Options Indexes FollowSymLinks MultiViews
Order allow,deny
allow from all
</Directory>
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
SSLCertificateFile /etc/letsencrypt/live/radio.domain.com/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/radio.domain.com/privkey.pem
Include /etc/letsencrypt/options-ssl-apache.conf
Options -Includes -ExecCGI
RewriteEngine On
RewriteCond %{THE_REQUEST} !HTTP/1.1$
RewriteRule .* - [F]
LimitRequestBody 512000
Header always set Strict-Transport-Security "max-age=63072000; includeSubdomains; preload"
Header always set X-Frame-Options DENY
FileETag None
TraceEnable off
Header set X-XSS-Protection "1; mode=block"
Timeout 60
<Proxy *>
Order deny,allow
Allow from all
</Proxy>
ProxyRequests Off
ProxyPreserveHost On
SSLProxyEngine On
RequestHeader set Front-End-Https "On"
ProxyPass /stream http://192.168.1.2:8080/stream #IP and port of local computer on same network
ProxyPassReverse /stream http://192.168.1.2:8080/stream #IP and port of local computer on same network
ProxyPass /np.xsl http://192.168.1.2:8080/np.xsl #np.xsl is a file that I call using ajax from my index.php page to get the track currently playing
ProxyPassReverse /np.xsl http://192.168.1.2:8080/np.xsl #np.xsl is a file that I call using ajax from my index.php page to get the track currently playing
</VirtualHost>
</IfModule>
My np.xsl file (in the Icecast "web" directory):
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
<xsl:output omit-xml-declaration="yes" method="text" indent="no" media-type="text/javascript" encoding="UTF-8"/>
<xsl:strip-space elements="*"/>
<xsl:template match="/icestats">
parseMusic({
<xsl:for-each select="source">"<xsl:value-of select="@mount"/>":{
"server_name":"<xsl:value-of select="server_name"/>",
"title":"<xsl:if test="artist"><xsl:value-of select="artist" /> - </xsl:if><xsl:value-of select="title" />",
"bitrate":"<xsl:value-of select="bitrate" />"}
<xsl:if test="position() != last()"><xsl:text>,</xsl:text>
</xsl:if>
</xsl:for-each>});
</xsl:template>
</xsl:stylesheet>
My index.php page:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title id="track-title"></title>
<style>
html{width:100%;}
body{background-color:#bfbfbf; text-align:center; font-family:Helvetica;}
#wrapper{position:absolute; max-width:550px; left:50%; transform:translate(-50%,0); -ms-transform:translate(-50%,0); -webkit-transform:translate(-50%,0); margin-right:-50%; text-align:center; box-shadow:1px 1px 20px 5px #4d4d4d;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
function updateTitle() {
$.ajax({
type: 'GET',
url: 'https://radio.domain.com/np.xsl',
jsonpCallback: 'parseMusic',
dataType: 'jsonp'
}).then(function (data) {
var $track = $('#track-title').text(data['/stream'].title);
var text = $track.text();
$track.text(text.replace(" - MediaMonkey",""));
}).fail(function (e) {
console.log(e);
}).always(function () {
setTimeout(updateTitle, 5000);
});
}
$(updateTitle);
function updateTitle2() {
$.ajax({
type: 'GET',
url: 'https://radio.domain.com/np.xsl',
jsonpCallback: 'parseMusic',
dataType: 'jsonp'
}).then(function (data) {
var $track = $('#track-title2').text(data['/stream'].title);
var text = $track.text();
$track.text(text.replace(" - MediaMonkey",""));
}).fail(function (e) {
console.log(e);
}).always(function () {
setTimeout(updateTitle2, 5000);
});
}
$(updateTitle2);
</script>
</head>
<body>
<div id="wrapper">
<h2>Live Radio</h2></br>
<h4><span id="track-title2"></span></h4></br></br>
<audio controls src="https://radio.domain.com/stream" type="audio/mp3"></audio><br></br>
</div>
</body>
</html>
Finally my icecast.xml code:
<icecast>
<location>Minneapolips, MN</location>
<admin>info@radio.domain.com</admin>
<hostname>radio.domain.com</hostname>
<limits>
<clients>50</clients>
<sources>1</sources>
<queue-size>524288</queue-size>
<client-timeout>30</client-timeout>
<header-timeout>15</header-timeout>
<source-timeout>10</source-timeout>
<burst-on-connect>1</burst-on-connect>
<burst-size>65535</burst-size>
</limits>
<authentication>
<source-password>hackme</source-password>
<relay-password>hackme</relay-password>
<admin-user>admin</admin-user>
<admin-password>hackmemore</admin-password>
</authentication>
<listen-socket>
<port>8080</port>
<shoutcast-mount>/stream</shoutcast-mount>
</listen-socket>
<http-headers>
<header name="Access-Control-Allow-Origin" value="*" />
</http-headers>
<fileserve>1</fileserve>
<paths>
<logdir>./log</logdir>
<webroot>./web</webroot>
<adminroot>./admin</adminroot>
<alias source="/" destination="/status.xsl"/>
</paths>
<logging>
<accesslog>access.log</accesslog>
<errorlog>error.log</errorlog>
<loglevel>4</loglevel> <!-- 4 Debug, 3 Info, 2 Warn, 1 Error -->
<logsize>10000</logsize> <!-- Max size of a logfile -->
</logging>
</icecast>
And what it looks like:
radio2017
radio2021
