Skip to content

Commit 70f2568

Browse files
advancedbearadvancedbear
committed
YouTubeの動作を修正
1 parent 65aac01 commit 70f2568

File tree

3 files changed

+52
-42
lines changed

3 files changed

+52
-42
lines changed

‎js/speech.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ function sayBouyomi(text) {
1313
}
1414

1515
function sayWebspeech(text) {
16-
speechSynthesis.cancel();
16+
//speechSynthesis.cancel();
1717
let uttr = new SpeechSynthesisUtterance();
1818
uttr.text = text;
1919
uttr.lang = isEnglish(text) ? uttr.lang = 'en-US' : uttr.lang = 'ja-JP'

‎js/youtube.js

Lines changed: 42 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
var socket, interval
1+
var socket, interval, interval2, lastUpdateTime
2+
var comment_buffer = new Array()
23
var k = "QUl6YVN5Qm1IX1ZuZnZ5YzBxVlhVTGVKSzVzZVJGaUFNQnVfQTZB"
34

45
$(document).ready(function () {
@@ -32,52 +33,56 @@ function connectYoutube() {
3233
if (window.innerWidth < 600) $('.collapsible').collapsible('close', 0)
3334
let activeChatId = (data).items[0].liveStreamingDetails.activeLiveChatId
3435
if (activeChatId != null) {
35-
let lastUpdateTime = 0
36+
lastUpdateTime = new Date().getTime()
37+
getComment(activeChatId)
3638
interval = setInterval(() => {
37-
$.ajax({
38-
url: 'https://www.googleapis.com/youtube/v3/liveChat/messages',
39-
type: 'GET',
40-
data: {
41-
liveChatId: activeChatId,
42-
part: 'authorDetails,snippet',
43-
hl: 'ja',
44-
maxResults: 2000,
45-
key: atob(k)
46-
}
47-
}).done((data) => {
48-
let mode = $("#mode").val()
49-
for (item of data.items){
50-
let UpdateTime = new Date(item.snippet.publishedAt).getTime()
51-
if (lastUpdateTime < UpdateTime){
52-
console.log(item)
53-
let author = (String)(item.authorDetails.displayName)
54-
let card, message
55-
if(item.snippet["textMessageDetails"]){
56-
message = (String)(item.snippet.textMessageDetails.messageText)
57-
card = `<div class="col s12"><div class="card-panel"><H6>${author}</H6><span>${message}</span></div></div>`
58-
} else {
59-
message = (String)(item.snippet.displayMessage)
60-
card = `<div class="col s12"><div class="card-panel orange lighten-4 pulse"><H6>${author}</H6><span>${message}</span></div></div>`
61-
}
62-
$(card).prependTo("#comment_box").hide().slideDown(300)
63-
if (mode == 0) sayBouyomi(message)
64-
else if (mode == 1) sayWebspeech(message)
65-
if(item == data.items[data.items.length-1]) lastUpdateTime = UpdateTime
66-
}
67-
}
68-
})
69-
}, 1000)
39+
getComment(activeChatId)
40+
}, 10000)
7041
}
7142
})
7243
}
7344

74-
function loadMessages(items, callback){
45+
function getComment(activeChatId){
46+
$.ajax({
47+
url: 'https://www.googleapis.com/youtube/v3/liveChat/messages',
48+
type: 'GET',
49+
data: {
50+
liveChatId: activeChatId,
51+
part: 'authorDetails,snippet',
52+
hl: 'ja',
53+
maxResults: 2000,
54+
key: atob(k)
55+
}
56+
}).done((data) => {
57+
let mode = $("#mode").val()
58+
for (item of data.items) {
59+
let UpdateTime = new Date(item.snippet.publishedAt).getTime()
60+
if (lastUpdateTime < UpdateTime) {
61+
console.log(item)
62+
let author = (String)(item.authorDetails.displayName)
63+
let card, message
64+
if (item.snippet["textMessageDetails"]) {
65+
message = (String)(item.snippet.textMessageDetails.messageText)
66+
card = `<div class="col s12 message-panel"><div class="card-panel"><H6>${author}</H6><span>${message}</span></div></div>`
67+
} else {
68+
message = (String)(item.snippet.displayMessage)
69+
card = `<div class="col s12 superchat-panel"><div class="card-panel orange lighten-4 pulse"><H6>${author}</H6><span>${message}</span></div></div>`
70+
}
71+
$(card).prependTo("#comment_box").hide().slideDown(300)
72+
if (mode == 0) sayBouyomi(message)
73+
else if (mode == 1) sayWebspeech(message)
74+
if (item == data.items[data.items.length - 1]) lastUpdateTime = UpdateTime
75+
}
76+
}
77+
})
7578
}
7679

80+
7781
function disconnectYoutube() {
7882
clearInterval(interval)
83+
speechSynthesis.cancel();
7984
$("#connect_button").toggleClass("disabled")
8085
$("#disconnect_button").toggleClass("disabled")
8186
$("#video_url").attr("disabled", false)
82-
//setTimeout(() => { $("#comment_box").fadeOut(500).empty().fadeIn(500) }, 500)
87+
setTimeout(() => { $("#comment_box").fadeOut(500).empty().fadeIn(500) }, 500)
8388
}

‎youtube.html

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<script type="text/javascript" src="./js/materialize.min.js"></script>
1414
<script src="./js/speech.js"></script>
1515
<script src="./js/youtube.js"></script>
16-
<title>StreamTTS - Twitch</title>
16+
<title>StreamTTS - YouTube Live</title>
1717
</head>
1818

1919
<body>
@@ -22,14 +22,18 @@
2222
<a href="#!" class="brand-logo center">StreamTTS</a>
2323
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
2424
<ul class="left hide-on-med-and-down">
25-
<li class="active"><a href="#"><stroke>Youtube</stroke></a></li>
25+
<li class="active"><a href="#">
26+
<stroke>Youtube</stroke>
27+
</a></li>
2628
<li><a href="twitch.html">Twitch</a></li>
2729
<li><a href="mixer.html">Mixer</a></li>
2830
</ul>
2931
</div>
3032
</nav>
3133
<ul class="sidenav" id="mobile-demo">
32-
<li class="active"><a href="#"><stroke>Youtube</stroke></a></li>
34+
<li class="active"><a href="#">
35+
<stroke>Youtube</stroke>
36+
</a></li>
3337
<li><a href="twitch.html">Twitch</a></li>
3438
<li><a href="mixer.html">Mixer</a></li>
3539
</ul>
@@ -40,9 +44,10 @@
4044
<div class="card">
4145
<div class="card-content">
4246
<span class="card-title">How to Use</span>
43-
<p>読み上げたいYoutube LiveのURLを入力してConnectボタンを押すだけ。</p>
47+
<p>読み上げたいYouTube LiveのURLを入力してConnectボタンを押すだけ。</p>
4448
<p>棒読みちゃんの無い環境（スマートフォン等）ではWebSpeech機能が使えます。</p>
4549
<p>スーパーチャットは強調表示されます。</p>
50+
<p class="red-text darken-4">YouTube Liveの仕様により、コメントは10秒おきに更新されます。</p>
4651
</div>
4752
</div>
4853
</div>

0 commit comments

Comments
 (0)