我想在我的网站上使用星球大战开始抓取。我找到了正确的例子 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>
答案 0 :(得分：0)
音频未播放。要立即播放音频，请使用audio标记上的autoplay属性。
<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>
答案 1 :(得分：-1)