-1
访问了几页寻求帮助，但我似乎无法设法得到这个工作，我正在做一个练习，并希望有一首歌在后台自动播放，但我无法设法让它去做。如何在我的网页练习中自动播放音乐？
这里是我的代码：
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="description" content="Portfolio Zoom Slider with jQuery">
<meta name="keywords" content="jquery, plugin, slider, zoom, portfolio, cloud-zoom">
<link rel="stylesheet" type="text/css" href="css/style.css">
\t \t <link rel="stylesheet" type="text/css" href="cloud-zoom/cloud-zoom.css">
\t \t <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css">
\t \t <script src="js/cufon-yui.js" type="text/javascript"></script>
\t \t <script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
\t \t <script type="text/javascript">
\t \t \t Cufon.replace('h1',{ textShadow: '1px 1px #D1EF95'});
\t \t \t Cufon.replace('h2',{ textShadow: '1px 1px #D1EF95'});
\t \t \t Cufon.replace('.footer');
\t \t </script>
</head>
<body>
\t
\t
<audio autoplay>
<source src="song.mp3" type="audio/mpeg">
</audio>
\t \t <div class="wrapper">
\t \t \t <h1><center>Topic 12 - Main Page</center></h1>
\t \t \t <h2><center>jQuery Plugin 1 -Mini Slider with jQuery</centet></h2>
\t \t \t <div class="line"></div>
\t \t \t <p class="intro">
\t \t \t \t <center>This demo shows the integration of a tiny jQuery slider with the jQuery Fancybox Plugin and the Cloud Zoom Plugin.
\t \t \t \t You can navigate through the thumbnails and see a zoomed version when you hover over them. When clicked, the full image is shown
\t \t \t \t using the Fancybox Plugin.</center>
\t \t \t \t <br>
\t \t \t \t <br>
\t \t \t \t <center><b><h2>Now featuring CHRISTMAS THEME!</h2></b></center>
\t \t \t </p>
\t \t \t <div class="line"></div>
\t \t \t <div id="content" class="content">
\t \t \t \t <div class="item">
\t \t \t \t \t <div class="thumb_wrapper">
\t \t \t \t \t \t <div class="thumb">
\t \t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t \t <li><a class="cloud-zoom" href="images/formstack1.jpg"><img src="images/thumbs/formstack1.jpg" alt="Formstack 1"></a></li>
\t \t \t \t \t \t \t \t <li><a class="cloud-zoom" href="images/formstack2.jpg"><img src="images/thumbs/formstack2.jpg" alt="Formstack 2"></a></li>
\t \t \t \t \t \t \t \t <li><a class="cloud-zoom" href="images/formstack3.jpg"><img src="images/thumbs/formstack3.jpg" alt="Formstack 3"></a></li>
\t \t \t \t \t \t \t </ul>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <a class="prev" href="#"></a>
\t \t \t \t \t \t <a class="next" href="#"></a>
\t \t \t \t \t \t <span>Click to enlarge</span>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="description">
\t \t \t \t \t \t <h2><center>Portfolio Image Navigation</center></h2>
\t \t \t \t \t \t <p><center>Have a look at this gallery of images, all themed ready for Christmas!</center></p>
\t \t \t \t \t \t \t <br>
\t \t \t \t \t \t <a href="html/portfolio.html"><center>Portfolio Image Navigation</center></a>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="item">
\t \t \t \t \t <div class="thumb_wrapper">
\t \t \t \t \t \t <div class="thumb">
\t \t \t \t \t \t \t <ul>
\t \t \t \t \t \t \t \t <li><a class="cloud-zoom" href="images/advent1.jpg"><img src="images/thumbs/advent1.jpg" alt="Advent 1"></a></li>
\t \t \t \t \t \t \t \t <li><a class="cloud-zoom" href="images/advent2.jpg"><img src="images/thumbs/advent2.jpg" alt="Advent 2"></a></li>
\t \t \t \t \t \t \t \t <li><a class="cloud-zoom" href="images/advent3.jpg"><img src="images/thumbs/advent3.jpg" alt="Advent 3"></a></li>
\t \t \t \t \t \t \t </ul>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <a class="prev" href="#"></a>
\t \t \t \t \t \t <a class="next" href="#"></a>
\t \t \t \t \t \t <span>Click to enlarge</span>
\t \t \t \t \t </div>
\t \t \t \t \t <div class="description">
\t \t \t \t \t \t <h2><center>Cubes Advent Calendar</center></h2>
\t \t \t \t \t \t <p><center>Given that it's almost Christmas already, I found it fitting to use an advent calendar plugin.</center></p>
\t \t \t \t \t \t <br>
\t \t \t \t \t \t <a href="html/advent.html"><center>Advent Calendar</center></a>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t
\t \t \t \t <div class="clear"></div>
\t \t \t \t <div class="line"></div>
\t \t \t </div>
\t \t </div>
\t \t
\t \t <!-- The JavaScript -->
\t \t <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
\t \t <script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
\t \t <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>
\t \t <script type="text/javascript" src="cloud-zoom/cloud-zoom.1.0.2.js"></script>
\t \t <script type="text/javascript">
\t \t \t $(function() {
\t \t \t \t /*
\t \t \t \t fancybox init on each cloud-zoom element
\t \t \t \t */
\t \t \t \t $("#content .cloud-zoom").fancybox({
\t \t \t \t \t 'transitionIn' \t : \t 'elastic',
\t \t \t \t \t 'transitionOut' \t : \t 'none',
\t \t \t \t \t 'speedIn' \t \t : \t 600,
\t \t \t \t \t 'speedOut' \t \t : \t 200,
\t \t \t \t \t 'overlayShow' \t : \t true,
\t \t \t \t \t 'overlayColor' \t : \t '#000',
\t \t \t \t \t 'cyclic' \t \t : \t true,
\t \t \t \t \t 'easingIn' \t \t : \t 'easeInOutExpo'
\t \t \t \t });
\t \t \t \t /*
\t \t \t \t because the cloud zoom plugin draws a mousetrap
\t \t \t \t div on top of the image, the fancybox click needs
\t \t \t \t to be changed. What we do here is to trigger the click
\t \t \t \t the fancybox expects, when we click the mousetrap div.
\t \t \t \t We know the mousetrap div is inserted after
\t \t \t \t the <a> we want to click:
\t \t \t \t */
\t \t \t \t $("#content .mousetrap").live('click',function(){
\t \t \t \t \t $(this).prev().trigger('click');
\t \t \t \t });
\t \t \t \t /*
\t \t \t \t the content element;
\t \t \t \t each list item/group with several images
\t \t \t \t */
\t \t \t \t var $content \t = $('#content'),
\t \t \t \t $thumb_list = $content.find('.thumb > ul');
\t \t \t \t /*
\t \t \t \t we need to set the width of each ul (sum of the children width);
\t \t \t \t we are also defining the click events on the right and left arrows
\t \t \t \t of each item.
\t \t \t \t */
\t \t \t \t $thumb_list.each(function(){
\t \t \t \t \t var $this_list \t = $(this),
\t \t \t \t \t total_w \t \t = 0,
\t \t \t \t \t loaded \t \t = 0,
\t \t \t \t \t //preload all the images first
\t \t \t \t \t $images \t \t = $this_list.find('img'),
\t \t \t \t \t total_images= $images.length;
\t \t \t \t \t $images.each(function(){
\t \t \t \t \t \t var $img \t = $(this);
\t \t \t \t \t \t $('<img/>').load(function(){
\t \t \t \t \t \t \t ++loaded;
\t \t \t \t \t \t \t if (loaded == total_images){
\t \t \t \t \t \t \t \t $this_list.data('current',0).children().each(function(){
\t \t \t \t \t \t \t \t \t total_w \t += $(this).width();
\t \t \t \t \t \t \t \t });
\t \t \t \t \t \t \t \t $this_list.css('width', total_w + 'px');
\t \t \t \t \t \t \t \t //next/prev events
\t \t \t \t \t \t \t \t $this_list.parent()
\t \t \t \t \t \t \t \t .siblings('.next')
\t \t \t \t \t \t \t \t .bind('click',function(e){
\t \t \t \t \t \t \t \t \t var current = $this_list.data('current');
\t \t \t \t \t \t \t \t \t if(current == $this_list.children().length -1) return false;
\t \t \t \t \t \t \t \t \t var \t next \t = ++current,
\t \t \t \t \t \t \t \t \t ml \t \t = -next * $this_list.children(':first').width();
\t \t \t \t \t \t \t \t \t $this_list.data('current',next)
\t \t \t \t \t \t \t \t \t .stop()
\t \t \t \t \t \t \t \t \t .animate({
\t \t \t \t \t \t \t \t \t \t 'marginLeft' \t : ml + 'px'
\t \t \t \t \t \t \t \t \t },400);
\t \t \t \t \t \t \t \t \t e.preventDefault();
\t \t \t \t \t \t \t \t })
\t \t \t \t \t \t \t \t .end()
\t \t \t \t \t \t \t \t .siblings('.prev')
\t \t \t \t \t \t \t \t .bind('click',function(e){
\t \t \t \t \t \t \t \t \t var current = $this_list.data('current');
\t \t \t \t \t \t \t \t \t if(current == 0) return false;
\t \t \t \t \t \t \t \t \t var \t prev \t = --current,
\t \t \t \t \t \t \t \t \t ml \t \t = -prev * $this_list.children(':first').width();
\t \t \t \t \t \t \t \t \t $this_list.data('current',prev)
\t \t \t \t \t \t \t \t \t .stop()
\t \t \t \t \t \t \t \t \t .animate({
\t \t \t \t \t \t \t \t \t \t 'marginLeft' \t : ml + 'px'
\t \t \t \t \t \t \t \t \t },400);
\t \t \t \t \t \t \t \t \t e.preventDefault();
\t \t \t \t \t \t \t \t });
\t \t \t \t \t \t \t }
\t \t \t \t \t \t }).attr('src',$img.attr('src'));
\t \t \t \t \t });
\t \t \t \t });
\t \t \t });
</script>
\t \t
\t \t <script src="js/charming.min.js"></script>
\t \t <script src="js/anime.min.js"></script>
\t \t <script src="js/textfx.js"></script>
\t \t <script src="js/main3.js"></script>
</body>
</html>我有 'Song.mp3的' 根文件夹，但我不能让它玩！
有什么建议吗？
你的变量'Cufon'是什么？另外，请检查您的浏览器的开发者工具控制台是否有任何错 – k97513
我发现在背景中播放不需要的音乐非常烦人，特别是在打开多个标签时。如果您必须播放音乐，请确保您有办法将其关闭（静音或暂停） – kurdtpage
这仅仅是为了提交练习，他们希望将网页设置为主题选择，所以我只是让它们以圣诞节为主题，只是为了达到目的的音乐。别担心，我也讨厌它，这仅仅是一个提交，将被扫视了30秒。 – purplemonkeydishwasher