webmidi-rtc-transport/paused.html at master · AtmanActive/webmidi-rtc-transport · GitHub

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
<!DOCTYPE html>
<html lang="en" data-dtinth>
  <head>
    <title>WebMIDI PAUSED</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/water.css@2.0/out/dark.min.css,gh/dtinth/dtinth-water@v0.3/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 is now paused</h1>

		<div class="wmwrtctr_resume_line">
			<button onclick="window.history.go(-1); return false;" class="wmwrtctr_resume_button" title="Resume the MIDI engine once you have your other apps lock their MIDI ports">
				RESUME
			</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 class="wmwrtctr_all_engines_stopped">
			<div class="wmwrtctr_one_engine_stopped">
				WebMIDI engine deactivated
			</div>
			<div class="wmwrtctr_one_engine_stopped">
				&nbsp;WebRTC engine deactivated
			</div>
		</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>
			function wmwrtctr_open_close_instructions()
			{

				const dom_element = document.getElementById( 'wmwrtctr_instructions' );

				if ( dom_element.style.display === 'none' )
				{
					dom_element.style.display = 'block';
				}
				else
				{
					dom_element.style.display = 'none';
				}

			}
		</script>

  </body>
</html>