您的当前位置:首页正文

实现兼容各种浏览器的音乐播放js代码

时间:2023-11-30 来源:站点网

有时候当我们在做一种网页的时候。需要用到背景音乐,怎料到有的浏览器根本就播放不了,那么什么样的js代码能实现这种兼容的功能呢?不是没有下面小编就和大家分享一下能兼容各种浏览器的背景音乐循环播放的js代码。

var bgSoundFile = " if (navigator.userAgent.toLowerCase().indexOf("msie") != -1) { document.write('<bgsound src="' + bgSoundFile + '" loop="-1">');} else if (navigator.userAgent.toLowerCase().indexOf("firefox") != -1) { document.write('<object data="' + bgSoundFile + '" type="application/x-mplayer2" width="0" height="0"><param name="filename" value="' + bgSoundFile + '"><param name="autostart" value="1"><param name="playcount" value="infinite"></object>');} else { document.write('<audio src="' + bgSoundFile + '" autoplay="autoplay" loop="loop"><object data="' + bgSoundFile + '" type="application/x-mplayer2" width="0" height="0"><param name="filename" value="' + bgSoundFile + '"><param name="autostart" value="1"><embed height="2" width="2" src="' + bgSoundFile + '" pluginspage="http://www.apple.com/quicktime/download/" type="video/quicktime" controller="false" controls="false" autoplay="true" autostart="true" loop="true" bgcolor="#000000"></embed></object></audio>');}

小编还为您整理了以下内容,可能对您也有帮助:

怎么用js实现播放音频?

1、JS播放音乐需要区分浏览器,来使用不用的对象来播放音乐。

2、在播放控制上要有【播放】和【停止】来控制音乐的播放。

3、基于以上思路,代码如下:

网站能自动循环播放的背景音乐代码是什么?

新建一个music.html页面:

HTML部分:

<audio id="bgAudio" controls="controls" autoplay="autoplay" hidden="hidden">

<source src="mp3/wangjie.mp3" type="audio/mp3">

<source src="mp3/wangjie.ogg" type="audio/ogg">

</audio>

js部分:

<script type="text/javascript">

myVid=document.getElementById("bgAudio");

myVid.volume=0.2;

</script>

再新建一个backMusic.html页面:

HTML部分:

<frameset cols="0%,100%">

<frame src="music.html"/>

<frame src="index.html" />

</frameset>

扩展资料:

<audio> 标签定义声音,比如音乐或其他音频流。

实例:

一段简单的 HTML 5 音频:

<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>

属性:

autoplay:如果出现该属性,则音频在就绪后马上播放。    

controls:如果出现该属性,则向用户显示控件,比如播放按钮。    

loop:如果出现该属性,则每当音频结束时重新开始播放。    

preload:如果出现该属性,则音频在页面加载时进行加载,并预备播放。

src:要播放的音频的 URL。

js怎样让Safari可以自动播放背景音乐

jquery控制背景音乐开关与自动播放提示音的方法。分享给大家供大家参考。具体如下:
  很多人初学网页制作时在网页中加入一段背景音乐,听到音乐响起的那一刻往往都会有一丝的成就感。
  这里就为大家讲解如何使用js控制背景音乐播放与停止。具体如下:
  一、jquery控制背景音乐开关
  复制代码 代码如下:
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http//www.w3.org/1999/xhtml" xml:lang="en" >
  <head>
  <script src="js/jquery.min.js"></script>
  <script type="text/javascript">
  //加载背景音乐,并自动播放
  $('#bg_music').append('<embed id="m_bg_music" loop=true volume="60" autostart=true hidden=true src="guoan.mp3" />');
  $('#bg_music_btn').click(function(){
  var state = $('#bg_music_btn').attr('state');
  if(state == '1')//
  {
  $('#bg_music_btn').attr('state','0');
  $('#bg_music_btn').html('打开背景音乐');
  $('#m_bg_music').remove();
  }else if(state == '0')
  {
  $('#bg_music_btn').attr('state','1');
  $('#m_bg_music').remove();
  $('#bg_music_btn').html('关闭背景音乐');
  $('#bg_music').append('<embed id="m_bg_music" loop=true volume="60" autostart=true hidden=true src="guoan.mp3" />');
  }
  });
  </script>
  </head>
  <body>
  <!--控制播放-->
  <div id="bg_music_btn" state='1'>关闭背景音乐</div>
  <!--背景音乐-->
  <div id="bg_music"></div>
  </body>
  </html>
  以上介绍了jquery如何控制背景音乐开关的方法,接下来再进一步扩展。
  二、JQuery自动播放提示音
  最早对网站有自动提示音的功能,发现在Discuz论坛中出现。但是它有一个问题就是只支持flash,不支持HTML5,不明确最新版本中是否支持HTML5。
  对于Discuz 7.2 版本中,提供了player.swf、pm_1.mp3、pm_2.mp3、pm_3.mp3,然后使用如下脚本来实现:
  复制代码 代码如下:
  <div id="soundplayerlayer" style="position:absolute;top:-100000px"></div>
  <script type="text/javascript" reload="1">
  function soundplayer(file) {
  $('soundplayerlayer').innerHTML = AC_FL_RunContent('id', 'pmsoundplayer', 'name', 'pmsoundplayer', 'width', '0′, 'height', '0′, 'src', '{$boarrl}images/sound/player.swf', 'FlashVars', 'sFile={$boarrl}images/sound/pm_' + file + '.mp3′, 'menu', 'false', 'allowScriptAccess', 'sameDomain', 'swLiveConnect', 'true');
  }
  </script>
  可惜这个方法局限在flash,在苹果设备上可能就会遇到麻烦了。
  HTML5开源播放器JPlayer支持自动播放提示音
  JPlayer支持play事件触发自动播放提示音。
  1. 装载JPlayer到一个div层,例如#jplayer。
  复制代码 代码如下:
  $(function() {
  $("#jplayer").jPlayer({
  swfPath: "http//www.jplayer.org/latest/js/Jplayer.swf",
  ready: function () {
  $(this).jPlayer("setMedia", {
  mp3: "./resources/message.mp3"
  });
  },
  supplied: "mp3"
  });
  });
  body部分加入:<div id="jplayer"></div>
  装载JQuery完成后,jplayer的div内容在支持swf的浏览器内变成:
  复制代码 代码如下:
  <div id="jplayer" style="width: 0px; height: 0px;"><img id="jp_poster_0" style="width: 0px; height: 0px; display: none;"><object height="1" width="1" id="jp_flash_0" data="http//www.jplayer.org/latest/js/Jplayer.swf" type="application/x-shockwave-flash" style="width: 0px; height: 0px;"><param name="flashvars" value="jQuery=jQuery&id=jplayer&vol=0.8&muted=false"><param name="allowscriptaccess" value="always"><param name="bgcolor" value="#000000"><param name="wmode" value="opaque"></object></div>
  在支持HTML5的浏览器内变成:
  复制代码 代码如下:
  <div id="jplayer" style="width: 0px; height: 0px;"><img id="jp_poster_0" style="width: 0px; height: 0px; display: none;"><audio id="jp_audio_0" preload="metadata" src="./resources/message.mp3"></audio></div>
  完成装载后就是触发播放的事件了。
  2. 触发播放提示音事件
  复制代码 代码如下:
  $("#jplayer").jPlayer('play');
  3. 循环播放函数,每5秒播放一次提示音
  复制代码 代码如下:
  function PlaySound() {
  $("#jplayer").jPlayer('play');
  setInterval("PlaySound()", 5000);
  return true;
  }
  附录:
  1. 解决无法自动播放提示音的问题
  如果在加载JQplayer后,立刻运行播放的触发事件,没有任何效果!具体是什么原因我也不太清楚,估计是因为音频文件没有加载上。
  2. 解决方法是让触发事件等待5秒中执行。
  复制代码 代码如下:
  setTimeout("$('#jplayer').jPlayer('play')", 5000);
  加载完页面,5秒后自动播放提示音。

js怎样让Safari可以自动播放背景音乐

jquery控制背景音乐开关与自动播放提示音的方法。分享给大家供大家参考。具体如下:
  很多人初学网页制作时在网页中加入一段背景音乐,听到音乐响起的那一刻往往都会有一丝的成就感。
  这里就为大家讲解如何使用js控制背景音乐播放与停止。具体如下:
  一、jquery控制背景音乐开关
  复制代码 代码如下:
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http//www.w3.org/1999/xhtml" xml:lang="en" >
  <head>
  <script src="js/jquery.min.js"></script>
  <script type="text/javascript">
  //加载背景音乐,并自动播放
  $('#bg_music').append('<embed id="m_bg_music" loop=true volume="60" autostart=true hidden=true src="guoan.mp3" />');
  $('#bg_music_btn').click(function(){
  var state = $('#bg_music_btn').attr('state');
  if(state == '1')//
  {
  $('#bg_music_btn').attr('state','0');
  $('#bg_music_btn').html('打开背景音乐');
  $('#m_bg_music').remove();
  }else if(state == '0')
  {
  $('#bg_music_btn').attr('state','1');
  $('#m_bg_music').remove();
  $('#bg_music_btn').html('关闭背景音乐');
  $('#bg_music').append('<embed id="m_bg_music" loop=true volume="60" autostart=true hidden=true src="guoan.mp3" />');
  }
  });
  </script>
  </head>
  <body>
  <!--控制播放-->
  <div id="bg_music_btn" state='1'>关闭背景音乐</div>
  <!--背景音乐-->
  <div id="bg_music"></div>
  </body>
  </html>
  以上介绍了jquery如何控制背景音乐开关的方法,接下来再进一步扩展。
  二、JQuery自动播放提示音
  最早对网站有自动提示音的功能,发现在Discuz论坛中出现。但是它有一个问题就是只支持flash,不支持HTML5,不明确最新版本中是否支持HTML5。
  对于Discuz 7.2 版本中,提供了player.swf、pm_1.mp3、pm_2.mp3、pm_3.mp3,然后使用如下脚本来实现:
  复制代码 代码如下:
  <div id="soundplayerlayer" style="position:absolute;top:-100000px"></div>
  <script type="text/javascript" reload="1">
  function soundplayer(file) {
  $('soundplayerlayer').innerHTML = AC_FL_RunContent('id', 'pmsoundplayer', 'name', 'pmsoundplayer', 'width', '0′, 'height', '0′, 'src', '{$boarrl}images/sound/player.swf', 'FlashVars', 'sFile={$boarrl}images/sound/pm_' + file + '.mp3′, 'menu', 'false', 'allowScriptAccess', 'sameDomain', 'swLiveConnect', 'true');
  }
  </script>
  可惜这个方法局限在flash,在苹果设备上可能就会遇到麻烦了。
  HTML5开源播放器JPlayer支持自动播放提示音
  JPlayer支持play事件触发自动播放提示音。
  1. 装载JPlayer到一个div层,例如#jplayer。
  复制代码 代码如下:
  $(function() {
  $("#jplayer").jPlayer({
  swfPath: "http//www.jplayer.org/latest/js/Jplayer.swf",
  ready: function () {
  $(this).jPlayer("setMedia", {
  mp3: "./resources/message.mp3"
  });
  },
  supplied: "mp3"
  });
  });
  body部分加入:<div id="jplayer"></div>
  装载JQuery完成后,jplayer的div内容在支持swf的浏览器内变成:
  复制代码 代码如下:
  <div id="jplayer" style="width: 0px; height: 0px;"><img id="jp_poster_0" style="width: 0px; height: 0px; display: none;"><object height="1" width="1" id="jp_flash_0" data="http//www.jplayer.org/latest/js/Jplayer.swf" type="application/x-shockwave-flash" style="width: 0px; height: 0px;"><param name="flashvars" value="jQuery=jQuery&id=jplayer&vol=0.8&muted=false"><param name="allowscriptaccess" value="always"><param name="bgcolor" value="#000000"><param name="wmode" value="opaque"></object></div>
  在支持HTML5的浏览器内变成:
  复制代码 代码如下:
  <div id="jplayer" style="width: 0px; height: 0px;"><img id="jp_poster_0" style="width: 0px; height: 0px; display: none;"><audio id="jp_audio_0" preload="metadata" src="./resources/message.mp3"></audio></div>
  完成装载后就是触发播放的事件了。
  2. 触发播放提示音事件
  复制代码 代码如下:
  $("#jplayer").jPlayer('play');
  3. 循环播放函数,每5秒播放一次提示音
  复制代码 代码如下:
  function PlaySound() {
  $("#jplayer").jPlayer('play');
  setInterval("PlaySound()", 5000);
  return true;
  }
  附录:
  1. 解决无法自动播放提示音的问题
  如果在加载JQplayer后,立刻运行播放的触发事件,没有任何效果!具体是什么原因我也不太清楚,估计是因为音频文件没有加载上。
  2. 解决方法是让触发事件等待5秒中执行。
  复制代码 代码如下:
  setTimeout("$('#jplayer').jPlayer('play')", 5000);
  加载完页面,5秒后自动播放提示音。

网页音乐播放器HTML源码

1、实现ASP.Net MVC网页播放音乐html代码。

2、实现控制音频播放、暂停还需要加入JS代码如下。

3、实现前台处理方法代码。

4、实现后台处理的方法代码。

5、支持HTML5浏览器效果1。

6、如果不支持HTML5浏览器效果如下。

javascript怎么实现播放本地音乐

具体如下:

JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。

JavaScript在1995年由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

站点网还为您提供以下相关内容希望对您有帮助:

网站能自动循环播放的背景音乐代码是什么?

js部分: myVid=document.getElementById("bgAudio"); myVid.volume=0.2; 再新建一个backMusic.html页面: HTML部分:

如何在打开网页时就能自动播放音乐

&lt;bgsound src="mlh.mp3" loop="-1"&gt;

想用怎么用js实现播放音频。

1、JS播放音乐需要区分浏览器,来使用不用的对象来播放音乐 2、在播放控制上要有【播放】和【停止】来控制音乐的播放 基于以上思路,代码如下:&lt;SCRIPT type="text/javascript"&gt; if(-1 != navigator.userAgent.indexOf(...

怎样在网页中自动播放音乐

&lt;bgsound src="背景音乐路径" loop="-1"&gt;这个随浏览器的打开而播放,当最小化窗口时即停止播放,当最大化窗口时又开始播放。而,常用于mid,,wav,mp3类型的音乐类型.这个则不管是否最小化窗口都始终播放,直至关闭当前...

求js控制音乐代码

开始播放 function s(){music.pause();} // 暂停播放 function add(){music.volume += 0.1;} // 增大音量 function sub(){music.volume -= 0.1;} // 减小音量 没什么好解释的,都是js提供的方法,没有任何...

javascript怎么实现播放本地音乐

具体如下:JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本...

JS高手帮我写一个背景音乐播放代码

IE:支持第一段代码,不支持第二段代码 Firefox:支持第二段代码,第一段代码的第一行需要装插件,不支持第一段的后两行 Chrom:支持第二段代码,不支持第一段代码中的后两行 Opera,Safari:第一段代码的第一行需要装...

HTML怎么添加背景音乐模块,进入网页自动播放的?

1、首先,打开html编辑器,新建html文件,例如:index.html。2、在index.html中的标签中,输入html代码:。3、浏览器运行index.html页面,此时一进入页面就自动播放了背景音乐。

点击一个按钮播放音乐,应用于 HTML,可以用JS插件

); } } &lt;!-- 上面是加入js部分的 --&gt; 播放/暂停

用js做一个播放音乐的功能,浏览器报错

wmp.playState==1 //停止播放 wmp.playState==2 //暂停播放 wmp.playState==3 //正常播放 wmp.playState==4 //向前搜索 wmp.playState==5 //向后搜索 wmp.playState==6 //缓冲处理 wmp.pla...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

猜你喜欢

Top