Great, can you briefly describe how to embedd audio in the html page?
"I Can't Do A Short Answer"..... folks who know me realize that
Short answer: HTML Audio Tag.
Long Answer: First of all, today everything's got to be TLS/SSL, and not simple http... otherwise 'media' might get rejected or ignored by devices, etc.
The Weather Radio Feed, in the header, is simple HTML tag, with a small javascript... just 'on' and 'off' ....the HTTPS audio stream is my feed from 'here' (
SECaster my encoder) served as HTTPS by the WxForum Communities '
NOAA WEATHER RADIO ORG', so I don't need SSL locally on those machines. (Ken True donates
WxRadio.Org Icecast server, and other features are donated and hosted by several WxForum folks)
HTML for the Weather Radio stream:
<div class="seqwxrad">
<audio id="noaaRAD"><source src='https://wxradio.org/KY-Frankfort-WZ2523' type='audio/mpeg' /></audio>
<a id="audioControl" href="#" title="NOAA All Hazards Radio. Frankfort KY 162.5 MHz."><img src="../listenB.png" id="playfwx" alt="Listen"/><img src="../stopB.png" id="pausefwx" alt="Stop"/></a>
</div>
And a bit of javascript for 'eye candy' and 'on/off'
var wxRadioFW = document.getElementById('noaaRAD'),
ctrl = document.getElementById('audioControl'),
playButton = document.getElementById('playfwx'),
pauseButton = document.getElementById('pausefwx');
function toggleButton() {
if (playButton.style.display === 'none') {
playButton.style.display = 'block';
pauseButton.style.display = 'none';
} else {
playButton.style.display = 'none';
pauseButton.style.display = 'block';
}
}
ctrl.onclick = function () {
if (wxRadioFW.paused) {
wxRadioFW.play();
} else {
wxRadioFW.pause();
}
toggleButton();
// Prevent Default Action
return false;
};
Now, that experimental camera audio is a different beast entirely... I DON'T stream the camera directly, for lots of reasons. Because of that, I've to work around the HTTPS thing, since I ain't payin' nobody to stream it, by golly! Ain't worth it. So use a program I've had a long time,
Netcam Studio, which can have SSL installed in its server, and I use a basic certificate and DNS from NO IP.
Audio streaming is problematic in the limitations of the applications and money I have available. So I pull the camera's audio out of Netcam using a trick I discovered, using it as both encoder and server, access it as an MP3 file... using the certificate in Netcam S., I could access it directly, exactly as in the RADIO feed above..., or with the pure and simple HTML5 Audio tag... or other methods.
BUT: HTML5 on an pure simple 'audio tag' has a couple of gotchas... on a Live, Continuous stream (not a 'track') it has no 'stop' attribute. If paused, it keeps streaming, caching the audio, so when you hit 'play' again, it starts where it left off, until things may or may not catch up with the 'live' data.... confusing, and sucks. It needed a bit more 'fuctionality' so we hacked into a 7 year old 'script', and have been messing with it... (be easier if I really knew what the hell I was doing). The Script is Jplayer, basically, and uses Jquery, with a bunch of interference from me...
Without getting into any more, here's what is in the actual HTML, as it stands,
ignoring the 'scripts' which are called separately.<div>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio-stream">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<table>
<tr><td><p>Live Audio</p>
</td><td>
<div class="jp-controls" style="width:105px">
<button class="jp-play" style="border:1px solid #008060;border-radius:4px" tabindex="0">play</button>
</div>
</td><td>
<div class="jp-volume-controls">
<button class="jp-mute" style="width:36px;left:0px" tabindex="0">mute</button>
<button class="jp-volume-max" style="display:inline;width:40px;left:44px;top:-36px" tabindex="0">max volume</button>
<div class="jp-volume-bar" style="top:-34px">
<div class="jp-volume-bar-value"></div>
</div>
</div>
</td></tr>
</table>
</div>
<div class="jp-no-solution"><span>Your device cannot play the camera audio</span>
</div>
</div>
So it's just an experiment, I'm sure there's a better way, but I'm cheap, old, and confused... and this isn't polished at all, just got it working.,..
OH... you must also setup Static IPs, both locally for cams and machines, and from the web, router port forwarding, so stuff doesn't move around or live in the twilight zone....