javascript - 无法播放声音

Question

我想在我的网站上使用 star wars opening crawl。我找到了正确的例子 http://codepen.io/SirDaev/pen/vLLwzw没有声音。根据作者的说法，声音应该与文本一起显示，问题就在这里。当我在我的网站上复制整个代码时没有声音。我正在使用 wordpress 16 的子模板

var sWidth; //screen width
var sHeight; //screen height
var canvas;
var context;
var numOfStars;
var starDensity = 1800; //lower == more stars
var starColors = ["#111", "#333", "#555", "#7872a8", "#483f26"];
var audio = $('audio').get(0);

$(document).ready(function() {
  
  //Play the theme song
  setTimeout(function() {
    audio.play();
  }, 7600);
  
  //Get the window size
	sWidth = $(window).width();
	sHeight = $(window).height();
  
  //Get the canvas
  canvas = $('#starfield');
  
  //Fill out the canvas
	canvas.attr('height', sHeight);
	canvas.attr('width', sWidth);
	context = canvas[0].getContext('2d');
  
  //Calculate the number of stars
  numOfStars = Math.floor((sWidth * sHeight) / starDensity);
  console.log(numOfStars);
  
  //Draw the stars
  function stars() {
    for (i=0;i<numOfStars;i++) {
      //Get a random star color
      var starColor = starColors[Math.floor(Math.random()*5)];
      //Get a random x-position
      var starX = Math.floor(Math.random()*sWidth);
      //Get a random y-position
      var starY = Math.floor(Math.random()*sHeight);
      //Draw
      context.beginPath();
      context.arc(starX, starY, 1, 0, 2 * Math.PI);
      context.fillStyle = starColor;
      context.fill();
    }
  }
  
  //Draw the stars
  stars();
  
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html {
  width: 100%;
  height: 100%;
  background-color: #000;
}

body {
  position: relative;
  width: 100%;
  max-width: 1920px;
  height: 100%;
  max-height: 1080px;
  font-family: 'Open Sans';
  overflow: hidden;
}

@media screen and (min-width: 1600px) {
  body {
    margin: 0 auto;
  }
}

/* In case of no audio support */
audio {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  font-size: 14px;
  font-weight: 700;
}

#starfield {
  z-index: 1;
  opacity: 0;
  position: absolute;
  animation: starfield 0s 8s forwards;
}

@keyframes starfield {
  to { opacity: 1; }
}

.long-time {
  z-index: 2;
  opacity: 0;
  position: absolute;
  color: #00d7ff;
  top: 50%;
  left: 51%;
  width: 65%;
  transform: translate3d(-50%,-50%,0);
  font-size: 30px;
  font-size: 4.5vw;
  line-height: 1.5em;
  animation: long-time 5s 1s forwards;
}

@media screen and (min-width: 1600px) {
  .long-time {
    font-size: 5.0em;
  }
}

@keyframes long-time {
  0% { opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; }
}

.logo {
  opacity: 0;
  z-index: 3;
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  animation: logo 10s 8s cubic-bezier(0,.1,.2,1); forwards;
}

@keyframes logo {
  0% { opacity: 1; }
  98% { opacity: 1; }
  100% { width: 40px;
         opacity: 0; }
}

.crawl-container {
  z-index: 2;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 350vh;
  max-height: 3000px;
  /**/color: #ffe029;
  /**/text-align: justify;
  /**/overflow: hidden;
  /**/transform-origin: 50% 100%;/**/
  /**/transform: perspective(200px) rotateX(16deg);
  /**/animation: crawl-container 0s 17s forwards;
}

@keyframes crawl-container {
  to { opacity: 1; }
}

.crawl-container .crawl {
  z-index: 2;
  position: absolute;
  top: 100%;
  width: 100%;
  animation: crawl 170s 17s linear forwards;
}

.crawl p {
  margin-left: auto;
  margin-right: auto;
  padding: 0 10%;
  max-width: 1500px;
}

.crawl p.title {
  font-size: 3em;
  font-size: 5vw;
  text-align: center;
}

.crawl p.title-1 {
  margin-bottom: .7em;
}

.crawl p.title-2 {
  margin-bottom: 1.2em;
}

.crawl p.title-2 img {
  width: 65%;
  height: auto;
}

p.crawl-p {
  text-align: justify;
  font-size: 5.6vw;
  margin-bottom: 1.2em;
}

@media screen and (min-width: 1600px) {
  p.crawl-p {
    font-size: 5.0em;
  }
}

@keyframes crawl {
  to { top: -250%; }
}

<audio preload="auto">
  <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.ogg" type="audio/ogg">
  <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
<canvas id="starfield"></canvas>
 <div class="long-time">A long time ago in a galaxy far,<br />far away....</div>
<img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/star-wars-7-logo.png" />
<div class="crawl-container">
  <div class="crawl">
      <p class="title title-1">Episode VII</p>
      <p class="title title-2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/the-force-awakens.png"</p>
      <p class="crawl-p">Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.</p>
      <p class="crawl-p">With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.</p>
      <p class="crawl-p">Leia has sent her most daring pilot on a secret mission to Jakku, where an old ally has discovered a clue to Luke's whereabouts....</p>
  </div>
</div>

Answer 1

音频未播放。要立即播放音频，请使用 autoplay audio 标签上的属性。

<audio preload="auto" autoplay>
  <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.ogg" type="audio/ogg">
  <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

工作片段:

var sWidth; //screen width
var sHeight; //screen height
var canvas;
var context;
var numOfStars;
var starDensity = 1800; //lower == more stars
var starColors = ["#111", "#333", "#555", "#7872a8", "#483f26"];
var audio = $('audio').get(0);

$(document).ready(function() {
  
  //Play the theme song
  setTimeout(function() {
    audio.play();
  }, 7600);
  
  //Get the window size
	sWidth = $(window).width();
	sHeight = $(window).height();
  
  //Get the canvas
  canvas = $('#starfield');
  
  //Fill out the canvas
	canvas.attr('height', sHeight);
	canvas.attr('width', sWidth);
	context = canvas[0].getContext('2d');
  
  //Calculate the number of stars
  numOfStars = Math.floor((sWidth * sHeight) / starDensity);
  console.log(numOfStars);
  
  //Draw the stars
  function stars() {
    for (i=0;i<numOfStars;i++) {
      //Get a random star color
      var starColor = starColors[Math.floor(Math.random()*5)];
      //Get a random x-position
      var starX = Math.floor(Math.random()*sWidth);
      //Get a random y-position
      var starY = Math.floor(Math.random()*sHeight);
      //Draw
      context.beginPath();
      context.arc(starX, starY, 1, 0, 2 * Math.PI);
      context.fillStyle = starColor;
      context.fill();
    }
  }
  
  //Draw the stars
  stars();
  
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html {
  width: 100%;
  height: 100%;
  background-color: #000;
}

body {
  position: relative;
  width: 100%;
  max-width: 1920px;
  height: 100%;
  max-height: 1080px;
  font-family: 'Open Sans';
  overflow: hidden;
}

@media screen and (min-width: 1600px) {
  body {
    margin: 0 auto;
  }
}

/* In case of no audio support */
audio {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  font-size: 14px;
  font-weight: 700;
}

#starfield {
  z-index: 1;
  opacity: 0;
  position: absolute;
  animation: starfield 0s 8s forwards;
}

@keyframes starfield {
  to { opacity: 1; }
}

.long-time {
  z-index: 2;
  opacity: 0;
  position: absolute;
  color: #00d7ff;
  top: 50%;
  left: 51%;
  width: 65%;
  transform: translate3d(-50%,-50%,0);
  font-size: 30px;
  font-size: 4.5vw;
  line-height: 1.5em;
  animation: long-time 5s 1s forwards;
}

@media screen and (min-width: 1600px) {
  .long-time {
    font-size: 5.0em;
  }
}

@keyframes long-time {
  0% { opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; }
}

.logo {
  opacity: 0;
  z-index: 3;
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  animation: logo 10s 8s cubic-bezier(0,.1,.2,1); forwards;
}

@keyframes logo {
  0% { opacity: 1; }
  98% { opacity: 1; }
  100% { width: 40px;
         opacity: 0; }
}

.crawl-container {
  z-index: 2;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 350vh;
  max-height: 3000px;
  /**/color: #ffe029;
  /**/text-align: justify;
  /**/overflow: hidden;
  /**/transform-origin: 50% 100%;/**/
  /**/transform: perspective(200px) rotateX(16deg);
  /**/animation: crawl-container 0s 17s forwards;
}

@keyframes crawl-container {
  to { opacity: 1; }
}

.crawl-container .crawl {
  z-index: 2;
  position: absolute;
  top: 100%;
  width: 100%;
  animation: crawl 170s 17s linear forwards;
}

.crawl p {
  margin-left: auto;
  margin-right: auto;
  padding: 0 10%;
  max-width: 1500px;
}

.crawl p.title {
  font-size: 3em;
  font-size: 5vw;
  text-align: center;
}

.crawl p.title-1 {
  margin-bottom: .7em;
}

.crawl p.title-2 {
  margin-bottom: 1.2em;
}

.crawl p.title-2 img {
  width: 65%;
  height: auto;
}

p.crawl-p {
  text-align: justify;
  font-size: 5.6vw;
  margin-bottom: 1.2em;
}

@media screen and (min-width: 1600px) {
  p.crawl-p {
    font-size: 5.0em;
  }
}

@keyframes crawl {
  to { top: -250%; }
}

<audio preload="auto" autoplay>
  <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.ogg" type="audio/ogg">
  <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
<canvas id="starfield"></canvas>
 <div class="long-time">A long time ago in a galaxy far,<br />far away....</div>
<img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/star-wars-7-logo.png" />
<div class="crawl-container">
  <div class="crawl">
      <p class="title title-1">Episode VII</p>
      <p class="title title-2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/the-force-awakens.png"</p>
      <p class="crawl-p">Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.</p>
      <p class="crawl-p">With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.</p>
      <p class="crawl-p">Leia has sent her most daring pilot on a secret mission to Jakku, where an old ally has discovered a clue to Luke's whereabouts....</p>
  </div>
</div>