在网站页面中添加自动播放背景音乐

2024-09-24 0 348

日常建站中,很多站点都把背景音乐添加到网页中,好的音乐可以增加网站的访客量和浏览时间,这样也使得站点变得更有趣,也显得高端大气。如果你想给自己的网站增加背景音乐该怎么操作呢?下面我们来了解下如何在网站页面中添加自动播放背景音乐。

一、首先准备应该mp3格式的音乐文件,上传到你的服务器或虚拟主机。

二、修改HTML代码,一般在你的HTML文件中的<head>标签中添加,代码如下:

在网站页面中添加自动播放背景音乐 MATLAB
<audio autoplay loop>  
  <source src="你的mp3文件路径" type="audio/mpeg">  
  您的浏览器不支持音频标签。  
</audio>

这段代码中,autoplay属性可以让音频在页面加载后自动播放,loop属性可以让音频在播放完毕后自动重复播放。<source>标签的src属性指定了音频文件的位置,你需要将mp3文件替换为你自己的音频文件路径。

如果你想给上面的代码增加一个按钮(暂停/播放),可以使用下面代码。

在网站页面中添加自动播放背景音乐 MATLAB
<audio id="myAudio" autoplay loop>  
  <source src="你的mp3文件路径" type="audio/mpeg">  
  您的浏览器不支持音频标签。  
</audio>  
  
<button id="controlButton" onclick="togglePlay()">暂停/播放</button>  
  
<script>  
var myAudio = document.getElementById("myAudio");  
var controlButton = document.getElementById("controlButton");  
var isPlaying = true;  
  
function togglePlay() {  
  if (isPlaying) {  
    myAudio.pause();  
  } else {  
    myAudio.play();  
  }  
  isPlaying = !isPlaying;  
}  
</script>

上面的两段代码在大部分浏览器中都可以实现音乐自动播放,但是对于一些现代浏览器,例如(Chrome和Safari)可能会阻止自动网页自动播放,建议给代码增加一个播放按钮,代码如下。

在网站页面中添加自动播放背景音乐 MATLAB
<audio id="myAudio" autoplay loop>  
  <source src="你的mp3文件路径" type="audio/mpeg">  
  您的浏览器不支持音频标签。  
</audio>  
  
<button id="playButton">播放</button>  
<button id="stopButton">暂停</button>  
  
<script>  
var myAudio = document.getElementById("myAudio");  
var playButton = document.getElementById("playButton");  
var stopButton = document.getElementById("stopButton");  
  
playButton.addEventListener("click", function() {  
  myAudio.play();  
});  
  
stopButton.addEventListener("click", function() {  
  myAudio.pause();  
});  
</script>

另附一段简易代码,同样适配于Chrome和Safari浏览器,只不过PC端会显示播放器样式,大家可以看一下,代码如下。

在网站页面中添加自动播放背景音乐 MATLAB
<audio autoplay="autoplay" controls="controls"loop="loop" preload="auto"
            	src="你的mp3文件路径">
      		你的浏览器版本太低,不支持audio标签
</audio>

以上就是在网站页面中添加自动播放背景音乐的一些方法,代码仅供参考,请自行研究,希望能帮到你,欢迎分享本站,谢谢!

    收藏 (0) 打赏

    感谢您的支持,我会继续努力的!

    打开微信扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
    点赞 (0)

    版权声明 1 本网站名称:爱资源吧-分享有价值的资源
    2 本站永久网址:https://www.azyb.cn/
    3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长 QQ275559997进行删除处理。
    4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
    6 本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。
    7 本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。
    8 如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
    9 本站资源大都存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
    10 如无特别声明本文即为原创文章仅代表个人观点,版权归《爱资源吧》所有,欢迎转载,转载请保留原文链接。

    爱资源吧-综合优质网络资源收集分享-提供最新最全的资源下载 技术教程 在网站页面中添加自动播放背景音乐 https://www.azyb.cn/jishu/2272.html/

    发表评论
    暂无评论