<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>voice</title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background: #333;
color: #ddd;
margin-bottom: 100px;
}
.box {
width: 70%;
margin: 0 auto;
margin-top: 50px;
line-height: 25px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.item {
display: inline-block;
width: 370px;
border-radius: 10px;
background: #444;
padding-left: 15px;
padding-right: 15px;
margin-top: 15px;
padding-bottom: 10px;
}
.item .word {
color: #fc0;
font-size: 24px;
line-height: 45px;
display: inline-block;
padding-right: 10px;
transition: color 0.35s;
cursor: pointer;
}
.item .word:hover {
color: #f90;
}
.item .button {
display: inline-block;
}
</style>
</head>
<body>
<div class="box">
<div class="item">
<p class="word">test </p><img class="button" src="voice.png" alt="voice">
</div>
<div class="item">
<p class="word">this is my home</p><img class="button" src="voice.png" alt="voice">
</div>
<div class="item">
<p class="word">zhugj </p><img class="button" src="voice.png" alt="voice">
</div>
<div class="item">
<p class="word">china </p><img class="button" src="voice.png" alt="voice">
</div>
<audio id="audio"></audio>
</body>
</html>
<script>
var audio = document.getElementById("audio");
var audioUrl = 'https://dict.youdao.com/speech?audio='; //有道在线发音的api地址
var pronounce = document.getElementsByClassName("button");
for (var index in pronounce) {
pronounce[index].onclick = function () {
audio.src = audioUrl + this.previousSibling.textContent; //获取p标签对象，因为p标签内才有英文单词;
audio.play();
}
}
</script>
