-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathwebaudio1.html
140 lines (123 loc) · 4.71 KB
/
webaudio1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html>
<head>
<title>setSinkId and enumeration demo</title>
</head>
<body>
OGV video:
<video id='video' src='STS-134_launch_2.ogv.160p.ogv' width='150' height='100'></video><br>
<button onclick='video.paused ? video.play() : video.pause()'>Play/Pause</button><br><br>
<label id="sinklabel"></label><br><br>
Change Audio Device: <select id="audiodevice" onchange="deviceSelected(video, audio_select_video, sink_label_video)"><option value="invalid"></option></select><br><br>
<button id="refresh" onclick="refreshDeviceList(false, audio_select_video);">Refresh device list</button><br>
<button id="setdefault" onclick="video.setSinkId('');">Set default sinkId</button><br>
<br><br><br>MP3 audio:
<audio id='myaudio' src='Audiobeast.mp3'></audio><br>
<button onclick='myaudio.paused ? myaudio.play() : myaudio.pause()'>Play/Pause</button><br><br>
<label id="sinklabel_myaudio"></label><br><br>
Change Audio Device: <select id="audiodevice_myaudio" onchange="deviceSelected(myaudio, audio_select_myaudio, sink_label_myaudio)"><option value="invalid"></option></select><br><br>
<button id="refresh_myaudio" onclick="refreshDeviceList(false, audio_select_myaudio);">Refresh device list</button><br>
<script>
var video = null;
var myaudio = null;
var audio_select_video = null;
var audio_select_myaudio = null;
var sink_label_video = null;
var sink_label_myaudio = null;
var context = new AudioContext(); // Create audio container
window.onload = onLoad;
function onLoad() {
audio_select_video = document.getElementById("audiodevice");
audio_select_myaudio = document.getElementById("audiodevice_myaudio");
video = document.getElementById("video");
myaudio = document.getElementById("myaudio");
sink_label_video = document.getElementById("sinklabel");
sink_label_myaudio = document.getElementById("sinklabel_myaudio");
//video.play();
navigator.webkitGetUserMedia(
{audio:true},
function(stream) {
refreshDeviceList(true,audio_select_video);
refreshDeviceList(true,audio_select_myaudio);
THESTREAM=stream;
stream.getAudioTracks()[0].stop();
console.log("stream closed");
},
function(err) {alert(err);}
);
}
function refreshDeviceList(selectFirst, audio_select) {
navigator.mediaDevices.enumerateDevices().then( function(infos) {
var count = 0;
var curValue = audio_select.options[audio_select.selectedIndex].value;
var curValueFound = false;
audio_select.disabled = true;
audio_select.innerHTML = '';
for (var i = 0; i < infos.length; i++) {
if (infos[i].kind != 'audiooutput') {
continue;
}
var option = document.createElement("option");
option.value = infos[i].deviceId;
option.text = infos[i].label;
count++;
option.text = '' + (count) + ' - ' + option.text + ' ' + infos[i].kind;
audio_select.appendChild(option);
if (option.value == curValue) {
curValueFound = true;
}
}
audio_select.disabled = false;
if (selectFirst) {
deviceSelected();
} else if (curValueFound) {
audio_select.value = curValue;
}
}, function(msg) {
alert('Something wrong: ' + msg);
});
}
function deviceSelected(elem, audio_select, sink_label) {
var deviceId = null;
if (audio_select.options.length > 0) {
deviceId = audio_select.options[audio_select.selectedIndex].value;
var promise = elem.setSinkId(deviceId);
promise.then(function(result) {
sink_label.innerHTML = 'Audio output device sink ID is ' + elem.sinkId;
}, function(e) {
sink_label.innerHTML = 'Audio output device could not be set: ' + e.name + ' - ' + e.message;
});
} else {
alert("No audio devices found");
}
}
function useOscillator() {
oscillator = context.createOscillator(); // Create sound source
msNode = context.createMediaStreamDestination();
oscillator.connect(msNode); // Connect sound to output
myaudio.src = URL.createObjectURL(msNode.stream);
oscillator.start(0); // Play instantly
console.log("SHOULD BE PLAYING OSCILLATOR");
}
function filter() {
//<input value="chrono.mp3" placeholder="URL to audio file...">
var input = document.querySelector('input');
var sample = new AudioTagSample();
var context = new webkitAudioContext();
var source = context.createMediaElementSource(audio1);
var filter = context.createBiquadFilter();
filter.type = this.filter.LOWPASS;
filter.frequency.value = 500;
sample.play(input.value);
// Connect the audio graph.
source.connect(this.filter);
filter.connect(context.destination);
url = input.value;
audio2.src = url;
audio2.play();
}
</script>
<br>
<button onclick='useOscillator()'>Oscillator</button><br><br>
</body>
</html>