-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