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

前言

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

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

源碼在最底下，用電腦復制后，粘貼到視頻頁面的控制臺并回車就可以體驗功能。

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

需要準備的只有個條件：

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

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

偵察彈幕

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

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

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

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

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

文字轉(zhuǎn)語音

請一定要相信，百分之99的問題都是大牛們早就解決過的。

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

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

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

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

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

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)，就立馬開始播放了。

（當然如果你還想繼續(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ù)封裝和調(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，努力探索中！

期待下期再整活兒！