Permalink
Fetching contributors…
Cannot retrieve contributors at this time
executable file 234 lines (190 sloc) 7.96 KB
<!DOCTYPE html>
<html lang="en">
<head>
<title>Share mp3 Live using RTCMultiConnection</title>
<script>
if(!location.hash.replace('#', '').length) {
location.href = location.href.split('#')[0] + '#' + (Math.random() * 100).toString().replace('.', '');
location.reload();
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
<meta name="author" content="Muaz Khan">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="https://cdn.webrtc-experiment.com/style.css">
<script>
document.createElement('article');
document.createElement('footer');
</script>
<style>
.search-container {
text-align: left;
margin: -2em 5%;
margin-top: 0;
}
.search-container input {
background-color: transparent;
}
.search-container td {
border: 0;
vertical-align: top;
padding: 0;
border-top: none;
border-right: none;
}
summary::-webkit-details-marker {
display: none
}
summary {
outline:none;
}
summary:after {
background: rgb(219, 215, 215);
border-radius: 1px;
content: "+";
color: #838080;
float: left;
font-size: 1.5em;
font-weight: bold;
margin: 0 10px 0 -10px;
padding: 0;
text-align: center;
width: 20px;
cursor: pointer;
border: 1px solid rgb(189, 189, 189);
border-left: 0;
}
details[open] summary:after {
content: "-";
}
details blockquote.inline {
margin-left: 23px;
}
.libraries {
margin-left: 0;
}
.libraries li {
list-style: none;
cursor: pointer;
}
</style>
<script src="https://cdn.webrtc-experiment.com/RTCMultiConnection.js"></script>
<script src="https://cdn.webrtc-experiment.com/firebase.js"></script>
</head>
<body>
<article>
<header style="text-align: center;">
<h1>
Share mp3 Live using <a href="https://github.com/muaz-khan/RTCMultiConnection">RTCMultiConnection</a>
</h1>
<p>
<a href="https://rtcmulticonnection.herokuapp.com/">HOME</a>
<span> &copy; </span>
<a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a>
.
<a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a>
.
<a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a>
.
<a href="https://github.com/muaz-khan/RTCMultiConnection/issues?state=open" target="_blank">Latest issues</a>
.
<a href="https://github.com/muaz-khan/RTCMultiConnection/commits/master" target="_blank">What's New?</a>
</p>
</header>
<div class="github-stargazers"></div>
<section class="experiment">
<h2 class="header">
Share mp3 Live using RTCMultiConnection
</h2>
<input type="file">
<button id="openNewSessionButton" disabled>Open New Room</button>
<br>
<div id="streams-container"></div>
</section>
<script>
var connection = new RTCMultiConnection();
connection.session = {
audio: true,
oneway: true
};
var streamsContainer = document.getElementById('streams-container');
connection.onstream = function(e) {
streamsContainer.appendChild(e.mediaElement);
};
// connect to signaling gateway
connection.connect();
// open new session
document.getElementById('openNewSessionButton').onclick = function() {
this.disabled = true;
connection.open();
};
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
var gainNode = context.createGain();
gainNode.connect(context.destination);
// don't play for self
gainNode.gain.value = 0;
document.querySelector('input[type=file]').onchange = function() {
this.disabled = true;
var reader = new FileReader();
reader.onload = (function(e) {
// Import callback function that provides PCM audio data decoded as an audio buffer
context.decodeAudioData(e.target.result, function(buffer) {
// Create the sound source
var soundSource = context.createBufferSource();
soundSource.buffer = buffer;
soundSource.start(0, 0 / 1000);
soundSource.connect(gainNode);
var destination = context.createMediaStreamDestination();
soundSource.connect(destination);
connection.attachStreams.push(destination.stream);
connection.dontCaptureUserMedia = true;
document.getElementById('openNewSessionButton').disabled = false;
});
});
reader.readAsArrayBuffer(this.files[0]);
};
</script>
<style>
input,
button[disabled] {
background: none;
border: 1px solid rgb(226, 223, 223);
color: rgb(219, 217, 217);
}
</style>
<section class="experiment own-widgets latest-commits">
<h2 class="header" id="updates" style="color: red;padding-bottom: .1em;"><a href="https://github.com/muaz-khan/RTCMultiConnection/commits/master">Latest Updates</a></h2>
<div id="github-commits"></div>
</section>
<section class="experiment own-widgets">
<h2 class="header" id="updates" style="color: red;padding-bottom: .1em;"><a href="https://github.com/muaz-khan/RTCMultiConnection/issues">Latest Issues</a></h2>
<div id="github-issues"></div>
</section>
<section class="experiment">
<h2 class="header" id="feedback">Feedback</h2>
<div>
<textarea id="message" style="height: 8em; margin: .2em; width: 98%; border: 1px solid rgb(189, 189, 189); outline: none; resize: vertical;" placeholder="Have any message? Suggestions or something went wrong?"></textarea>
</div>
<button id="send-message" style="font-size: 1em;">Send Message</button><small style="margin-left:1em;">Enter your email too; if you want "direct" reply!</small>
</section>
</article>
<a href="https://github.com/muaz-khan/RTCMultiConnection" class="fork-left"></a>
<footer>
<p>
<a href="/licence/">MIT License</a>
© <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
<a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
<a href="https://github.com/muaz-khan" target="_blank">Github</a>
Powered by <a href="http://www.arvixe.com/">Arvixe Web Hosting</a>
</p>
</footer>
<script>
window.useThisGithubPath = 'muaz-khan/RTCMultiConnection';
</script>
<script src="https://cdn.webrtc-experiment.com/commits.js" async></script>
</body>
</html>