-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