-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