<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<div id="wrap">
<div class="box">
<div id="text">
<span>간장 공장 공장장은 강 공장장이고 된장 공장 공장장은 장 공장장이다.<br>산 사람들과 선 사람 둘과 선사시대 사람들 속에 속해있는 사람들 속에서 선사람 둘을 솎아낼까. 선 사람 둘과 산 사람들과 선사시대 사람들 속에 섞여있는 선 사람들 속에 안 선 사람을 더 섞을까. 선사시대 사람들과 산 사람들과 선 사람 둘이 전부 서서 서로가 서로를 서로 솎아내려 할 때 선사시대 사람은 선 사람이나 안 선 사람이나 선한 사람이나 안 선 상태로 서로 손을 잡고 3433년 3월 13일 신시와 3시 33분 33초를 서로의 눈을 보며 말하자고 했다.</span>
</div>
<button>READ</button>
</div>
</div>
*{margin:0; padding:0; box-sizing:border-box;}
#wrap{display:flex; align-items: center; justify-content:center; height:100vh; width:100%; background-color:#ccc;}
.box{width:80%; height:300px; box-shadow:0 0 10px rgba(0,0,0,0.5); border-radius:15px; overflow:hidden; background-color:#fff;}
#text{margin:auto; padding:2%; text-align:center; display:flex; align-items: center; justify-content:center; height:80%; }
button{margin:auto; display:block; border-radius:50%; width:50px; height:50px; background-color:#ccc; cursor:pointer; border:0; box-shadow:0 0 10px rgba(0,0,0,0.9)}
.alertbox{background-color:rgba(0,0,0,0.7); position:fixed; display:flex; align-items: center; justify-content:center; height:100vh; width:100%; top:0; left:0; transition:1s; opacity:0; z-index:-1;}
.alertbox .box{display:flex; align-items: center; justify-content:center; opacity:0.7;}
$('button').click(function(){
let sound = new SpeechSynthesisUtterance(`${$('#text span').text()}`);
speechSynthesis.speak(sound);
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.