用html js实现 单击文字然后播放单词或音乐

html5中使用audio标签，DOM里如下，文字是“播放”，当点击时，音乐播放，文字会变成”暂停”。两个文字会随着音乐是否播放而切换。

例子

我这里调用了有道的单词发音接口，因为单词本身发音的时间很短，所以暂停不是很明显，可以换长一点的音频。

代码

<audio id="voice" src="http://dict.youdao.com/dictvoice?type=0&audio=apple"></audio>
<p class="but">播放</p>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        var voice = document.getElementById('voice'); //获取到audio元素
          $('.but').click(function() { //点击文字事件
            if (voice.paused) { //判断音乐是否在播放中，暂停状态
                voice.play(); //音乐播放
                $('.but').text('暂停'); //切换文字
            } else { //播放状态
                voice.pause(); //音乐停止
                $('.but').text('播放'); //切换文字
            }
        });
     });
</script>

百度的接口

http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=你要转换的文字

和上面有道接口调用的原理一样

lan=zh：语言是中文，如果改为lan=en，则语言是英文。
ie=UTF-8：文字格式。
spd=2：语速，可以是1-9的数字，数字越大，语速越快。
text=**：这个就是你要转换的文字。