教你讓b站視頻的彈幕發(fā)出語音!

前言

又是歡天喜地的編程up整活兒時(shí)間！

這次給大家?guī)淼氖恰队新晱椖弧罚?/p>

源碼在最底下，用電腦復(fù)制后，粘貼到視頻頁面的控制臺(tái)并回車就可以體驗(yàn)功能。

那么，先介紹實(shí)現(xiàn)過程：

需要準(zhǔn)備的只有個(gè)條件：

1. 讓瀏覽器偵察視頻彈幕

2. 讓瀏覽器文字轉(zhuǎn)語音

偵察彈幕

偵查彈幕非常簡單，我常介紹的：用元素選擇器，選中窗口，一看這個(gè)類名，然后看這里面這一個(gè)個(gè)標(biāo)簽，就知道和彈幕有關(guān)。

播放視頻也可以發(fā)現(xiàn)，這個(gè)標(biāo)簽里面的元素會(huì)不斷變化的。

那思路就簡單了，只好用代碼監(jiān)聽這個(gè)標(biāo)簽的變化就好了，jquery提供了非常方便的語法糖。

$(".bilibili-player-video-danmaku").bind('DOMNodeInserted',?function(e)?{
????console.log($(e.target).html());
});

嘗試了一下，果然能捕獲到每一條彈幕。

文字轉(zhuǎn)語音

請(qǐng)一定要相信，百分之99的問題都是大牛們?cè)缇徒鉀Q過的。

所以，只要搜索一下就能找到代碼了

不難發(fā)現(xiàn)，這個(gè)代碼是HTML5自帶的接口，簡單的幾句，就完成了文字轉(zhuǎn)語音。

let?msg?=?new?SpeechSynthesisUtterance('你好');
speechSynthesis.speak(msg);

可惜在完成后的效果，只能一句一句讀，彈幕一旦多起來，就念不完了。

所以后來才用了另一種方案：調(diào)用百度語音接口，將文本傳輸?shù)桨俣确?wù)器，服務(wù)器會(huì)發(fā)回一份語音給我們，然后再把這段語音以audio的形式插入到瀏覽器的dom中，開啟自動(dòng)播放就可以了。

let?div?=?document.createElement("div");div.innerHTML?=?`
????
?????????????????src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&per=1&spd=8&text=${需要讀的文本變量}"?type="audio/mpeg">
????????
????`;
document.getElementsByTagName('body')[0].appendChild(div);

這樣完成后，彈幕一出現(xiàn)，就立馬開始播放了。

（當(dāng)然如果你還想繼續(xù)完善，可以做一下銷毀）

把剛剛兩套代碼整合一下，咱們的任務(wù)就大功告成了。

$(".bilibili-player-video-danmaku").bind('DOMNodeInserted',?function(e)?{
????console.log($(e.target).html());
????let?div?=?document.createElement("div");
????div.innerHTML?=?`
????????
?????????????????????????src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&per=1&spd=8&text=${$(e.target).html()}"?type="audio/mpeg">
????????????
????????
????`;
????document.getElementsByTagName('body')[0].appendChild(div);
});

不過效果嘛....

嘰嘰喳喳的太煩了哈哈哈哈

除非刷新網(wǎng)頁要不停不下來。

所以我加了一段代碼，用于控制彈幕語音的播放和暫停。（其實(shí)就是簡單的函數(shù)封裝和調(diào)用）

最終成品：

let?on?=?true;
let?start?=?()=>{????
????console.warn('%c已開啟彈幕語音播放，你可以通過按%cS鍵%c停止','color:red','color:yellow','color:red');????
????$(".bilibili-player-video-danmaku").bind('DOMNodeInserted',?function(e)?{
????????console.log($(e.target).html());
????????let?div?=?document.createElement("div");
????????div.innerHTML?=?`
????????????
?????????????????????????????????src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&per=1&spd=8&text=${$(e.target).html()}"?type="audio/mpeg">
????????????????
????????????
????????`;
????????document.getElementsByTagName('body')[0].appendChild(div)
????});
}
let?stop?=?()=>{
????$(".bilibili-player-video-danmaku").unbind();
????console.warn('%c已經(jīng)關(guān)閉播放彈幕語音，你可以通過按%cS鍵%c再次開啟','color:red','color:yellow','color:red');
}
$(document).keydown(function(event){
????if(event.keyCode==83){
????????if(on)?stop();
????????else?start();
????????on?=?!on
????}
??});
console.warn('已加載腳本，刷新或關(guān)閉頁面后失效')
start();

結(jié)尾

我是冬灰條，想要做最有趣最易懂的編程up，努力探索中！

期待下期再整活兒！

???????????????????????????????????????????????????????????????????作者|冬灰條?????????????????????????????????????????????????????????????????https://juejin.im/post/6894220757938012167

??愛心三連擊

1.看到這里了就點(diǎn)個(gè)在看支持下吧，你的「點(diǎn)贊，在看」是我創(chuàng)作的動(dòng)力。

2.關(guān)注公眾號(hào)程序員成長指北，回復(fù)「1」加入Node進(jìn)階交流群！「在這里有好多 Node 開發(fā)者，會(huì)討論 Node 知識(shí)，互相學(xué)習(xí)」！

3.也可添加微信【ikoala520】，一起成長。

“在看轉(zhuǎn)發(fā)”是最大的支持