-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