0%

hexo博客中 使用javascirpt和jqurey播放audio

发表于 更新于 分类于 ， ， Valine：


前言

markdown中可以插入html标签，所以可以插入audio标签来播放音频。

方式0 使用原生的audio播放音频

1
<audio src="http://fanyi.baidu.com/gettts?lan=en&text=focus&spd=5&source=web" controls="controls"></audio>

显示效果：

但是原生的audio标签控件太大了，占用文章太多空间,在电脑端，看起来还勉强凑合，但是在手机端的原生的audio控件会超出屏幕之外很不美观。所以我想着不用原生的audio,而是使用其他方式来打开音频。

方式1 使用javascript播放音频

1
2
3
4
5
6
7
8
9
10
11
<audio src="http://fanyi.baidu.com/gettts?lan=en&text=document&spd=3&source=web" id="audio0"></audio>
<input type="button" onclick="paly_audio0();" value="使用JS播放" />
<script>
    function paly_audio0() {
        //找到音频
        var audio0 = document.getElementById("audio0");
        if (audio0 != null) {
            audio0.play();
        }
    }
</script>

显示效果：

方式2 使用javascript播放音频 简写

1
2
<audio src="http://fanyi.baidu.com/gettts?lan=en&text=hello world&spd=3&source=web"  id="audio1"></audio>
<input type="button" onclick="document.getElementById('audio1').play();" value="播放"/>

这种方式，直接写在html中是可以播放的，但是写到在这里hexo 无法渲染。我用的是next主题，也不知道是hexo的原因，还是next主题的原因 。总之不要在文章中使用这种简写的方式就行了。

方式2 使用jquery播放音频

跟使用javascript方式，也可以使用jquery来播放：

1
2
3
4
5
6
7
8
9
10
11
12
<audio src="http://fanyi.baidu.com/gettts?lan=en&text=document&spd=3&source=web" id="documentAudio"></audio>
<input type="button" id="documentPlay" value="播放document" />
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    $('#documentPlay').click(function () {
        //找到音频
        var documentAudio = document.getElementById('documentAudio');
        if (documentAudio != null) {
            documentAudio.play();
        }
    })
</script>

效果如下：

总结

还是直接使用javascript来播放音频的好，这样还少几行代码，也不用引入jqurey库。