-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathselectaudiooutput-demo1.html
156 lines (137 loc) · 5.27 KB
/
selectaudiooutput-demo1.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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html>
<head>
<title>selectAudioOutput, enumerateDevices and setSinkId 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='selectAndPlay()'>Select Audio Output and Play</button>
<button onclick='callPause()'>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="callgum" onclick="callGum();">Request Microphone Permission</button><br><br>
<button id="refresh_myaudio" onclick="refreshDeviceList(false, audio_select_myaudio);">Enumerate Devices</button><br>
<ul id="devicelist"></ul>
<!-- <button onclick='myaudio.setSinkId("").then(()=>{}, e=>console.log(e))'>Change to default device</button><br><br> -->
<!-- <button onclick='myaudio.setSinkId("invalid").then(()=>{}, e=>console.log(e))'>Change to invalid device</button><br><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 device_list = null;
window.onload = onLoad;
async function callPause() {
myaudio.pause();
sink_label_myaudio.innerHTML = "Paused";
}
async function callGum() {
try {
console.log("Calling gUM");
let stream = await navigator.mediaDevices.getUserMedia({audio:true});
console.log("stream = ", stream);
stream.getAudioTracks()[0].stop();
} catch(e) {
console.log("gUM failed: ", e);
alert('Microphone permission not given');
}
}
async function selectAndPlay() {
let deviceInfo = null;
try {
if (!navigator.mediaDevices.selectAudioOutput) {
alert("selectAudioOutput not supported");
return;
}
deviceInfo = await navigator.mediaDevices.selectAudioOutput();
console.log("deviceInfo: ", deviceInfo);
console.log('calling setSinkId on ', myaudio)
await myaudio.setSinkId(deviceInfo.deviceId);
console.log("setSinkId() was successful");
await myaudio.play();
console.log("play() was successful");
sink_label_myaudio.innerHTML = "Playing on " + deviceInfo.label;
} catch (e) {
console.log('exception: ', e)
alert("No output device selected");
}
}
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");
device_list = document.getElementById("devicelist");
//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 addItem(strItem) {
var item = document.createElement("li");
item.innerHTML = strItem;
device_list.appendChild(item);
}
function clearItems() {
while (device_list.firstChild ){
device_list.removeChild(device_list.firstChild );
}
}
function refreshDeviceList(selectFirst) {
clearItems()
if (!navigator.mediaDevices) {
addItem('navigator.mediaDevices not supported');
return;
}
if (!navigator.mediaDevices.enumerateDevices) {
addItem('enumerateDevices not supported');
return;
}
navigator.mediaDevices.enumerateDevices().then( function(infos) {
var count = 0;
for (var i = 0; i < infos.length; i++) {
count++;
addItem('' + (count) + ' - ' + infos[i].kind + ' - ' + infos[i].deviceId + ' - ' + infos[i].label);
}
}, 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");
// }
// }
</script>
</body>
</html>