誰もが一度はQiita記事をラジオのように音で聞けたらなと思ったことがあると思う（ない）
先日、TwitterでWebSpeachAPIというJavaScriptのライブラリを使って簡単にブラウザを喋らせることができると話題になっていた。（ずいぶんと前からあったっぽいが）
とても面白そうなんだけど、なにをしゃべらせばいいのか思いつかなかったからQiita記事をしゃべらせてみた
##つくったもの
app.py
from flask import Flask
from flask import render_template, request
from bs4 import BeautifulSoup
import requests
app = Flask(__name__)
@app.route('/', methods=['GET'])
def index():
return render_template('index.html')
@app.route('/', methods=['POST'])
def url_post():
qiita_url = request.form.get('qiita_url')
# スクレイピングするURLを指定しHTMLを取得
res = requests.get(str(qiita_url))
# BeautifulSoupオブジェクトをつくる
soup = BeautifulSoup(res.text, 'html.parser')
# クラス名を指定して要素を取得
speech_title = soup.find("h1",class_='css-cgzq40').get_text()
speech_text = soup.find("section",class_='it-MdContent').get_text()
context = {
'title': speech_title,
'text': speech_text
}
return render_template('index.html', context=context)
if __name__ == '__main__':
app.run(host='0.0.0.0', port='5000')
template/index.html
<html>
<body>
<h2>ブラウザにQiita記事をしゃべらす</h2>
<form action="/" method="POST" enctype="multipart/form-data">
<input type="url" name="qiita_url">
<input type="submit" value="決定">
</form>
{% if context %}
<div>
<h4>{{context.title}}</h4>
<button id="speech-btn">再生</button>
<button id="cancel-btn">停止</button>
<button id="pause-btn">一時停止</button>
<button id="resume-btn">再開</button>
<p id="text">{{context.text}}</p>
</div>
{% endif %}
</body>
{% if context %}
<script>
const text = document.getElementById("text").textContent
const speechBtn = document.querySelector('#speech-btn')
const cancelBtn = document.querySelector('#cancel-btn')
const pauseBtn = document.querySelector('#pause-btn')
const resumeBtn = document.querySelector('#resume-btn')
// 再生
speechBtn.addEventListener('click', function() {
const uttr = new SpeechSynthesisUtterance(text)
speechSynthesis.speak(uttr)
})
// 停止
cancelBtn.addEventListener('click', function() {
speechSynthesis.cancel()
})
// 一時停止
pauseBtn.addEventListener('click', function() {
speechSynthesis.pause()
})
// 再開
resumeBtn.addEventListener('click', function() {
speechSynthesis.resume()
})
</script>
{% endif %}
</html>
全体はFlaskを使ってて、その中でBeautifulSoupを使って指定のQiita記事をスクレイピングして、喋らせたい要素をWebSpeechAPIに渡してる感じ
ただChromeだとうまく動作しなかった、なんか声の種類が関係しているっぽい
動作確認済の環境
Win : Edge
iOS : safari
##まとめ
しゃべらせるものを間違えてる感が半端なくて個人的にはとても好き
思ったよりちゃんと喋っててて驚き
（初投稿頑張った）