website/magwestqueuedev.html at master · umbc-hackafe/website · 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
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
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Playback Monitor</title>
    <script src="https://cdn.jsdelivr.net/npm/autobahn-js-built@0.11.1/autobahn.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nipplejs/0.7.3/nipplejs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.0/progressbar.min.js"></script>
  </head>
  <body>
    <h1 id="currentsource" style="font-size: 80px">Loading...</h1>
    <h2 id="preview" style="font-size: 40px">Please Click Connect.</h2>
    <h2 id="currenttime" style="font-size: 40px"></h2>
    <div class="progress" id="progress" height="100px"></div>
    <button id="connect">Connect to server</button><br>
    <audio id="audioPlayback" controls>
        <source id="audioSource" type="audio/mp3" src="">
    </audio>
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.410.0.min.js"></script>

    <script type="application/javascript">
        var connection = new autobahn.Connection({url: 'wss://crossbar.hackafe.net:7778/ws', realm: 'realm1'});
        var sourceEl = document.getElementById("currentsource");
        var previewEl = document.getElementById("preview");
        var timeEl = document.getElementById("currenttime");
        var progress = new ProgressBar.Line('#progress', {
            strokeWidth: 100,
        });

        AWS.config.region = 'us-east-1'; // Region
        AWS.config.credentials = new AWS.CognitoIdentityCredentials({
            IdentityPoolId: 'us-east-1:90d3ff9d-a985-4a79-bf45-826f3d42a52e',
        });

        // Function invoked by button click
        function speakText(speech) {
            // Create the JSON parameters for getSynthesizeSpeechUrl
            var speechParams = {
                OutputFormat: "mp3",
                SampleRate: "16000",
                Text: "",
                TextType: "text",
                VoiceId: "Matthew"
            };
            speechParams.Text = speech[0];

            // Create the Polly service object and presigner object
            var polly = new AWS.Polly({apiVersion: '2016-06-10'});
            var signer = new AWS.Polly.Presigner(speechParams, polly)

            // Create presigned URL of synthesized speech file
            signer.getSynthesizeSpeechUrl(speechParams, function(error, url) {
            if (error) {
                console.log(error);
            } else {
                console.log(speech);
                document.getElementById('audioSource').src = url;
                document.getElementById('audioPlayback').load();
                document.getElementById('audioPlayback').currentTime = 0;
                document.getElementById('audioPlayback').play();
            }
          });
        }

        function msToTime(s) {
            // Pad to 2 or 3 digits, default is 2
            function pad(n, z) {
            z = z || 2;
            return ('00' + n).slice(-z);
            }

            var ms = s % 1000;
            s = (s - ms) / 1000;
            var secs = s % 60;
            s = (s - secs) / 60;
            var mins = s % 60;
            var hrs = (s - mins) / 60;

            return pad(hrs) + ':' + pad(mins) + ':' + pad(secs) + '.' + pad(ms, 3);
        }

        var source = "";
        var spoken = false;

        connection.onopen = function (session) {
            console.log("Connected");
            connect.style.display = "none";

            function updateStatus(body) {
                parser = new DOMParser();
                xmlDoc = parser.parseFromString(body, "text/xml");
                var programID = xmlDoc.getElementsByTagName('active')[0].childNodes[0].nodeValue;
                var previewID = xmlDoc.getElementsByTagName('preview')[0].childNodes[0].nodeValue;
                var inputs = xmlDoc.getElementsByTagName('input');
                var program = undefined;
                var preview = undefined;
                for (var i=0; i<inputs.length; i++) {
                    var input = inputs[i].attributes;
                    if (input.number.value === programID) {
                        program = input;
                    }
                    if (input.number.value === previewID) {
                        preview = input;
                    }
                }
                if (source != program.title.value) {
                    source = program.title.value;
                    spoken = false;
                }

                if (program.duration.value > 3000) {
                    if (program.duration.value - program.position.value < 4000) {
                        if (!spoken) {
                            if (!(program.loop.value === "True")) {
                                spoken = true;
                                speakText(["Video Ending in 3, 2, 1, Mark",]);
                            }
                        }
                    }
                }

                sourceEl.innerHTML = program.title.value;
                previewEl.innerHTML = "UP NEXT: " + preview.title.value + " (" + msToTime(preview.duration.value) + ")";
                progress.set(program.position.value / program.duration.value);
                timeEl.innerHTML = "-" + msToTime(program.duration.value - program.position.value) + " / " + msToTime(program.duration.value);
            }
            session.subscribe('com.discordspeak', speakText);
            session.subscribe('com.vmixstatus', updateStatus);
        };

        connect.addEventListener('click', function conn() {
            connection.open();
        });
    </script>
  </body>
</html>