<h1>demo1</h1>
<input class="text" value="web speech apiを使ってみよう">
<button onclick="speak()">speak()</button>
<script>
function speak(){
	var text = document.querySelector('.text').value;
	speechSynthesis.speak(
		new SpeechSynthesisUtterance(text)
	);
}
</script>

下のボタンを押してみてください。

demo1

speak()

※type=”hidden”とすれば、inputは非表示にできます。

<?php 
	$weather = "&#91; 東京都の天気概況 &#93; 本州付近は高気圧に覆われています。 【関東甲信地方】 関東甲信地方は、甲信地方は晴れている所もありますが、関東地方はおおむね曇りとなっています。 3日は、高気圧に覆われて晴れますが、湿った空気の影響により、朝晩中心に曇る所があるでしょう。";
?>
<h1>今日の天気</h1>
<?php echo $weather; ?><br>
<input type="hidden" class="text" value="<?php echo $weather; ?>">
<button onclick="speak()">音声再生</button>
<script>
function speak(){
	var text = document.querySelector('.text').value;
	speechSynthesis.speak(
		new SpeechSynthesisUtterance(text)
	);
}
</script>

ぎゃーーー　素晴らしいですね。