这篇文章本来原定是前天发出来,但前天夏柔迎来了人生第一个高中学业水平合格性考试~
想了解更多可以看一下这篇文章(阅读更多)
步入正题
这个教程属实挺折磨我的,因为一开始我想到了audio
标签,但发现那些浏览器**自动播放参数** 并没有什么效果,于是开始了百度编程...
令我惊讶的是,这些教程看似有用,实则都是一堆水文章,如同一篇文章百人复制发布,几年前的方法也不管是否有用直接发出来,差点没把我折磨死...
《百度的各种解决方案》
当时夏柔通过百度方案找了半天,甚至连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://51tbox.com/";
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>
好了,教程就写到这里,如果有不懂的地方记得联系夏柔哦~
转载记得注明来源~