这篇文章本来原定是前天发出来，但前天夏柔迎来了人生第一个高中学业水平合格性考试～

想了解更多可以看一下这篇文章（阅读更多）

步入正题

这个教程属实挺折磨我的，因为一开始我想到了audio标签，但发现那些浏览器自动播放参数并没有什么效果，于是开始了百度编程...

令我惊讶的是，这些教程看似有用，实则都是一堆水文章，如同一篇文章百人复制发布，几年前的方法也不管是否有用直接发出来，差点没把我折磨死...

《百度的各种解决方案》

  • 微信内自动播放音频非百度方案-WordPress极简博客
    百度的各种方案找了半天无果

当时夏柔通过百度方案找了半天，甚至连JS的点击事件都用上了，比如直接在 body 添加一个 onclick="xiarou()" 用户点击网页任意内容再通过JS实现播放音频...

其实这个方案也比较实用，比如你的网站里需要播放公告就直接使用这个方法，别人点击网站的时候自动播放网站公告...

教程开始

方案一 点击事件

首先在你的全局头部文件的 body 添加一个事件，如：onclick="xiarou()" ;

则示例代码为：

<body onclick="xiarou()" >

然后添加html代码：

<audio src="https://cdn.wpon.cn/text-yinpin/2022.mp3" id="bjmusic"></audio>

JS代码如下：

<script>
        function xiarou() {
            var bjmusic = document.getElementById('bjmusic')
            bjmusic.play()
        }
    </script>

则完整代码如下：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>自动播放音频HTML - WPON</title>
</head>

<body onclick="xiarou()">
    <!-- 音频文件 -->
    <audio src="https://cdn.wpon.cn/text-yinpin/2022.mp3" id="bjmusic"></audio>
    <!-- JS代码 Start-->
    <script>
        function xiarou() {
            var bjmusic = document.getElementById('bjmusic')
            bjmusic.play()
        }
    </script>
    <!-- JS代码 End-->

</html>

方案二 自动播放

引入Jqeury：

<script src="https://cdn.wpon.cn/text-yinpin/jqeury.min.js"></script>

然后添加html代码：

<audio src="https://cdn.wpon.cn/text-yinpin/2022.mp3" id="bjmusic"></audio>

JS代码：

<script>
  speckText(0)
    function speckText(str){
        var url = "https://cdn.wpon.cn/text-yinpin/2022.mp3";
        var voiceContent = new Audio(url);
        voiceContent.src = url;
        voiceContent.play();
    }
</script>

则完整代码如下：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>自动播放音频HTML - WPON</title>
    <script src="https://cdn.wpon.cn/text-yinpin/jqeury.min.js"></script>
</head>

<body onclick="xiarou()">
    <!-- 音频文件 -->
    <audio src="https://cdn.wpon.cn/text-yinpin/2022.mp3" id="bjmusic"></audio>
    <!-- JS代码 Start-->
    <script>
        speckText(0)

        function speckText(str) {
            var url = "https://cdn.wpon.cn/text-yinpin/2022.mp3";
            var voiceContent = new Audio(url);
            voiceContent.src = url;
            voiceContent.play();
        }
    </script>

    <!-- JS代码 End-->

</html>

好了，教程就写到这里，如果有不懂的地方记得联系夏柔哦～

转载记得注明来源～