< >

audiobalken.php


Quell Code


  
  
  <?php 

 
    $url = array (
		"http://dg-wdr-http-dus-dtag-cdn.cast.addradio.de/wdr/1live/live/mp3/128/stream.mp3?ar-distributor=f0b9",
		"http://dg-mdr-http-dus-dtag-cdn.cast.addradio.de/mdr/990801/0/mp3/high/stream.mp3?ar-distributor=f0b9",
		"http://aach.stream.tb-group.fm/tb-high.aac?",		
        "http://hb.aacl.stream.tb-group.fm/",
        "http://ct.aacl.stream.tb-group.fm/",
        "http://relay02.t4e.dj/hard_low.mp3",
        
		"//webdesign.weisshart.de/audios/the_magics_tuff.mp3" //letzte Zeile ohne schließendes Komma!
	);

	/* ################### und hier die angezeigten Titel  ######################### */
	$name = array (
		"Eins Live [ Stream ]",
		"Schlager [ Stream ]",	
		"Techno Base Fm [Stream]",	
        "Hardbase [ Stream ]",
        "Core Time [ Stream ]",
        "Techno for Ever [ Stream ]",
		"Tuff - The Magics unplugged"  //letzte Zeile ohne schließendes Komma!
	);


/* ##################### ab hier nicht mehr editieren ############################## */

$aufruf ="";
$direktLink ="";


function isIOS($user_agent=NULL) {
    if(!isset($user_agent)) {
        $user_agent = isset($_SERVER['HTTP_USER_AGENT']) ? $_SERVER['HTTP_USER_AGENT'] : '';
    }
    return (strpos($user_agent, 'iPhone') !== FALSE || strpos($user_agent, 'iPad') !== FALSE || strpos($user_agent, 'iPod') !== FALSE );
}


/* den uebergebenen Titel abfragen */
if (isset($_REQUEST['titel']))  {
	$_REQUEST['titel'] = htmlentities($_REQUEST['titel']);
	if (!is_numeric($_REQUEST['titel']) || $_REQUEST['titel'] > count($url) ) {$titel = $url[0];}
	$autoplay="autoplay"; /* kein Autoplay in iOS */
	$neuer_titel=true; 
	for ($i = 1; $i <= count($url); $i++) {
		if ($_REQUEST["titel"] == $i) {$titel = $url[$i-1];}
	}
} else {
	$titel = $url[0];
	$autoplay = "";
}

/* die Linkliste generieren */
for ($i = 1; $i <= count($url); $i++) {
	$aufruf .= '<li><a href="?titel='.$i.'"> '.$name[$i-1];
	if ($titel == $url[$i-1]) {
		$aufruf .= "<span class='star'> ??</span>";
	}
	$aufruf .= "</a></li>\n";

	$direktlink .= '<li><a style="color:#000" href="'.$url[$i-1].'"> '.$name[$i-1].'</a></li>';
}

?>
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

<style>

html {font-family: Arial, sans-serif;}
#player {
    border: 6px solid #666;
	border-radius: .5em;
	max-width: 24em;
	background: #0e0c0b;
  margin:auto;
}


#player audio {width: 99%;   margin: 25px 0 0 0; border:1px solid transparent;} /* 25px fuer Android */
#player audio:focus, #player audio:hover {background:#bbb;} /* die Rahmenfarbe */

@media screen and (-webkit-min-device-pixel-ratio:0) { /*chrome only*/
	audio {	filter: invert(1);}
}

#player ul {margin:0;padding:0}
#player li {
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	list-style-type:none;
	/*padding:6px;*/
	border-top: 2px solid #666;
	/* width: 240px; */
}

#player li a {padding:6px;}
#player li a:focus, #player li a:hover {background:#ccc;color:#000;outline:0}
#player li, #player li a {color:white;text-decoration:none; font-size: .9rem;display:block;}
.star {font-size: 1.3rem; line-height: .1rem; /*vertical-align: -.5rem;*/}
.bem {
	font-size: .8rem; 
	-webkit-text-size-adjust: none; /* was es alles gibt! */
}

h1, p, #gemafrei {text-align:center;}



/* Smartphones and iPad (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 1024px) {
	#gemafrei:before {content:'iOS und Android mögen leider kein Autostart.'; display:block;}
	#player li{border-top: 1px solid #888;}
}




</style>
<title>Radio für meine Gäste</title>
<!-- <script src="modernizr.custom.29132.js"></script> -->

<?php
if(isIOS()) {
echo '
<style>
	#player {background: #e1e1e1 !important;border: 2px solid #aaa;}
	li a {color:#000 !important;}
	li {border-top: 1px solid #aaa !important}
	audio {margin: 10px 0 5px 0;filter: invert(0);}
</style>';
}
?>



</head>
<body  onload="Lautstaerke()">
 
<div id="ie_fallback"></div>
<div id="player">

<!-- erstaunlich: ohne <source> tag gehts auch mit VO auf iOS -->
<audio id="innerplayer" src="<?php echo $titel; ?>"  controls <?php echo $autoplay; ?> ></audio>

<ul>
<?php echo $aufruf; ?>
</ul>
</div>

 
<script>
if (top.location == self.location) {
    // Seite in einem Frame geladen
 }	
</script>


<!-- <p id="gemafrei" class="bem">Gemafreie Demo-mp3: <a href="http://www.MP3-GEMA-frei.de">MP3-GEMA-frei.de</a></p> -->

<?php
$neuer_titel = 0;
if (isset($_REQUEST['titel']))  {$neuer_titel=$_REQUEST['titel'];}

?>

<script>

/* Damit Screen Reader Ausgaben nicht uebertoent werden: */
function Lautstaerke() {
	document.getElementById("innerplayer").volume=0.7;
	/* Fokus auf Player setzen nach Anwahl */
	var neu = <?php echo $neuer_titel; ?>;
	
	if ( neu !== 0 ) {
		//		document.getElementById('innerplayer').focus(); // führt zu Springen des Fokus in iOS
	}
}

</script>



<?php 
/* ###########  serielle Wiedergabe ######### */

if ($neuer_titel >= count($url)) {
	$next = 1;
} elseif ($neuer_titel == 0) {
	$next = 2;
} else {
	$next = $neuer_titel +1;
} 

echo '
<script>	
document.getElementById("innerplayer").addEventListener("ended", function() {
	window.location = "?titel='.$next.'";
	return false;
});
</script>
';

?>
 
 






<script>
function drawBuffer( width, height, context, data ) {
    var step = Math.ceil( data.length / width );
    var amp = height / 2;
    context.fillStyle = "silver";
    context.clearRect(0,0,width,height);
    for(var i=0; i < width; i++){
        var min = 1.0;
        var max = -1.0;
        for (j=0; j<step; j++) {
            var datum = data[(i*step)+j]; 
            if (datum < min)
                min = datum;
            if (datum > max)
                max = datum;
        }
        context.fillRect(i,(1+min)*amp,1,Math.max(1,(max-min)*amp));
    }
}
</script>
<style>

canvas { 
    	display: inline-block; 
		background: #202020; 
		box-shadow: 0px 0px 10px blue;
        height:100px;
        margin:5px;
        width:200px;
}
#record { height: 15vh; }
#record.recording { 
		background: red;
		background: -webkit-radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); 
		background: -moz-radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); 
		background: radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%); 	}
#save, #save img { height: 10vh; }
#save { opacity: 0.25;}
#save[download] { opacity: 1;}

#viz{
        display:flex;
		flex-direction:row;
		justify-content: space-around;
		align-items: center;
}
#left,#right{
        display:flex;
        flex-dirction:column;
}

#server{
        position:relative;
        height:300px;
        overflow:auto;
        width:100%;
        border:2px solid black;
}
body{
        display:flex;
        flex-direction:column;
        font: 14pt Arial, sans-serif; 
    	background: lightgrey;
}
</style>
</head>
<body>
 
		<canvas id="analyser" width="124" height="50"></canvas>
		<canvas id="wavedisplay" width="124" height="50"></canvas>
 
	<script>
    
 
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContext();
var audioInput = null,
    realAudioInput = null,
    inputPoint = null,
    audioRecorder = null;
var rafID = null;
var analyserContext = null;
var canvasWidth, canvasHeight;
var recIndex = 0;

function saveAudio() {
    audioRecorder.exportWAV( doneEncoding );
    // audioRecorder.exportMonoWAV( doneEncoding );
}

function gotBuffers( buffers ) {
    var canvas = document.getElementById( "wavedisplay" );
    drawBuffer( canvas.width, canvas.height, canvas.getContext('2d'), buffers[0] );
    audioRecorder.exportWAV( doneEncoding );
}

function doneEncoding( blob ) {
            var fd = new FormData();
            fd.append('data', blob);
 
    Recorder.setupDownload( blob, "myRecording" + ((recIndex<10)?"0":"") + recIndex + ".wav" );
    recIndex++;
}
  
 
function convertToMono( input ) {
    var splitter = audioContext.createChannelSplitter(2);
    var merger = audioContext.createChannelMerger(2);
    input.connect( splitter );
    splitter.connect( merger, 0, 0 );
    splitter.connect( merger, 0, 1 );
    return merger;
}

function cancelAnalyserUpdates() {
    window.cancelAnimationFrame( rafID );
    rafID = null;
}

function updateAnalysers(time) {
    if (!analyserContext) {
        var canvas = document.getElementById("analyser");
       canvasWidth = canvas.width;
        canvasHeight = canvas.height;
        analyserContext = canvas.getContext('2d');
    }

    // analyzer draw code here
    {
        var SPACING = 3;
        var BAR_WIDTH = 1;
        var numBars = Math.round(canvasWidth / SPACING);
        var freqByteData = new Uint8Array(analyserNode.frequencyBinCount);
        analyserNode.getByteFrequencyData(freqByteData); 
        analyserContext.clearRect(0, 0, canvasWidth, canvasHeight);
        analyserContext.fillStyle = '#F6D565';
        analyserContext.lineCap = 'round';
        var multiplier = analyserNode.frequencyBinCount / numBars;

        // Draw rectangle for each frequency bin.
        for (var i = 0; i < numBars; ++i) {
            var magnitude = 0;
            var offset = Math.floor( i * multiplier );
            for (var j = 0; j< multiplier; j++)
                magnitude += freqByteData[offset + j];
            magnitude = magnitude / multiplier;
            var magnitude2 = freqByteData[i * multiplier];
            analyserContext.fillStyle = "hsl( " + Math.round((i*360)/numBars) + ", 100%, 50%)";
            analyserContext.fillRect(i * SPACING, canvasHeight, BAR_WIDTH, -magnitude);
        }
    }
    rafID = window.requestAnimationFrame( updateAnalysers );
}

function toggleMono() {
    if (audioInput != realAudioInput) {
        audioInput.disconnect();
        realAudioInput.disconnect();
        audioInput = realAudioInput;
    } else {
        realAudioInput.disconnect();
        audioInput = convertToMono( realAudioInput );
    }
    audioInput.connect(inputPoint);
}

function gotStream(stream) {
    inputPoint = audioContext.createGain();
    realAudioInput = audioContext.createMediaStreamSource(stream);
    audioInput = realAudioInput;
    audioInput.connect(inputPoint);
// audioInput = convertToMono( input );
    analyserNode = audioContext.createAnalyser();
    analyserNode.fftSize = 2048;
    inputPoint.connect( analyserNode );
    audioRecorder = new Recorder( inputPoint );
    zeroGain = audioContext.createGain();
    zeroGain.gain.value = 0.0;
    inputPoint.connect( zeroGain );
    zeroGain.connect( audioContext.destination );
    updateAnalysers();
}

function initAudio() {
        if (!navigator.getUserMedia)
            navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        if (!navigator.cancelAnimationFrame)
            navigator.cancelAnimationFrame = navigator.webkitCancelAnimationFrame || navigator.mozCancelAnimationFrame;
        if (!navigator.requestAnimationFrame)
            navigator.requestAnimationFrame = navigator.webkitRequestAnimationFrame || navigator.mozRequestAnimationFrame;

    navigator.getUserMedia(
        {
            "audio": {
                "mandatory": {
                    "googEchoCancellation": "false",
                    "googAutoGainControl": "false",
                    "googNoiseSuppression": "false",
                    "googHighpassFilter": "false"
                },
                "optional": []
            },
        }, gotStream, function(e) {
            alert('Error getting audio');
            console.log(e);
        });
}

window.addEventListener('load', initAudio );
    
</script>
</body>
</html>