forked from dtinth/midi-rtc
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
146 lines (131 loc) · 6.29 KB
/
index.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
<!DOCTYPE html>
<html lang="en" data-dtinth>
<head>
<title>WebMIDI via WebRTC</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400;0,700;1,400;1,700&display=swap"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/combine/npm/[email protected]/out/dark.min.css,gh/dtinth/[email protected]/dtinth-water.min.css"
/>
-->
<link rel="icon" href="./favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1 class="wmwrtctr_title"><img src="./midi.png" class="wmwrtctr_titl_icon">
WebMIDI + WebRTC p2p Transport <a href="./multi"><button class="wmwrtctr_title_button" title="Go to multi-port version">Multi -></button></a>
</h1>
<div class="wmwrtctr_pause_line">
<button onclick="window.location.href = './paused.html'" class="wmwrtctr_pause_button" title="Pause the MIDI engine if your MIDI ports are locked and you can't access them from other apps">
PAUSE
</button>
</div>
<p class="wmwrtctr_intro_text">
The purpose of this web app is to connect several devices acros internet
via MIDI in order to synchronize MIDI Transport Control (Mackie) signals
so when a DAW goes into play mode, everyone connected can get the signal
and have their communication microphones automatically muted. Also, when DAW playback
stops, everyone receives the MIDI stop signal so their communication microphones
can automatically unmute. <a onClick="JavaScript: wmwrtctr_open_close_instructions();" class="wmwrtctr_instructions_affordance">[Instructions]</a>
</p>
<div id="app" class="container">
<p class="wmwrtctr_peer_link_label">Peer Link:</p>
<p id="connection-info" class="wmwrtctr_peer_link_url" onClick="JavaScript: wmwrtctr_copy_url_to_clipboard_on_click();" title="click to copy to clipboard">{{url}}</p>
<template v-if="error">
<div class="wmwrtctr_error">
{{ error }}
</div>
</template>
<template v-else>
<div class="wmwrtctr_center_display">
<div>
<h2 class="wmwrtctr_port_labels">MIDI input</h2>
<!-- <port-selector :selected="currentInput" :available="availableInputs" @select="selectedInput = $event"></port-selector> -->
<div class="wmwrtctr_port_name">{{midiInputPortName}}</div>
</div>
<div class="align-self-center wmwrtctr_arrow">
→
</div>
<div>
<h2 class="wmwrtctr_port_labels">WebRTC</h2>
<ul class="wmwrtctr_counters">
<li>Peers: {{ activeConnections }}</li>
<li>Received: {{ received }}</li>
<li>Sent: {{ sent }}</li>
</ul>
</div>
<div class="align-self-center wmwrtctr_arrow">
→
</div>
<div>
<h2 class="wmwrtctr_port_labels">MIDI output</h2>
<!-- <port-selector :selected="currentOutput" :available="availableOutputs" @select="selectedOutput = $event"></port-selector> -->
<div class="wmwrtctr_port_name">{{midiOutputPortName}}</div>
</div>
</div>
</template>
</div>
<p class="wmwrtctr_instructions" id="wmwrtctr_instructions" style="display: none;">
Usage instructions for Windows:
<br>
Preparation: install
<a target="_blank" href="https://www.tobias-erichsen.de/software/loopmidi.html">loopMIDI virtual MIDI cable by Tobias Erichsen</a>.
In loopMIDI, create two virtual MIDI cables and name them: "WebRTC-Outgoing" and "WebRTC-Incoming".
This web app will automatically search for those two MIDI ports and connect to them.
If you see other MIDI port names under MIDI input and MIDI output display on this page
that means your browser didn't find the ports "WebRTC-Outgoing"/"WebRTC-Incoming", or
they are already locked by some other application.
<br>
<br>
Send your MIDI signals to WebRTC-Outgoing cable to have them broadcast to the group.
Incoming MIDI signals from the group will be sent to WebRTC-Incoming MIDI cable.
<br>
<br>
To have your microphone automatically muted/unmuted,
<a target="_blank" href="https://github.com/AtmanActive/MIDI-Transport2Keys">check out this project</a>.
For real-time p2p audio/video communication, checkout <a target="_blank" href="https://p2p.mirotalk.com">MiroTalk</a>.
For real-time studio-quality audio transport from your DAW, checkout <a target="_blank" href="https://sonobus.net/">Sonobus</a>.
<br>
<br>
Make sure you use this web app in a
<a target="_blank" href="https://en.wikipedia.org/wiki/Chromium_(web_browser)">Chromium-based browser</a>.
Now you can bookmark and share this page link with your fellow musicians.
Pay attention to the link part after the # sign in the address: that's your room ID.
<br>
<br>
As of 2024. WebMIDI on Windows locks all the available MIDI ports when active.
Thus, make sure to start this browser tab last, after you have your DAW and other
MIDI utilities running. For quick adjustments, you can use the app's PAUSE button.
</p>
<p class="wmwrtctr_signature">
Developed by <a href="https://github.com/AtmanActive/webmidi-rtc-transport" target="_blank">AtmanActive</a> by
expanding on the work by <a href="https://github.com/dtinth/midi-rtc" target="_blank">dtinth</a>.
<br>
Powered by simple-peer, P2PT and Web MIDI API.
</p>
<script type="x-template" id="port-selector">
<div>
<ul class="port-selector">
<li v-for="option of options" :key="option.key" :class="{ 'is-selected': option.selected }">
<a href="javascript:" @click="select(option)">{{ option.text }}</a>
</li>
</ul>
</div>
</script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"
integrity="sha256-IBqKNNdZBkvlyBDTBnPO57idR/RhhMygjQ59d9MsNZ4="
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./script.js"></script>
</body>
</html>