1
こんにちは私はウェブページ用に音声をHTMLに追加する学校プロジェクトに取り組んでいます。私はすべてのタイプアップしていると私は物理的なコントロールを、実際には2つの場所が誤っているが、オーディオを取得していません。私はビデオ要素を追加する必要がありますが、私はこれが比較的簡単になると考えていれば確信しています。ここに私のコードは次のとおりです。HTML5内にオーディオ要素を追加しようとしています
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="ericWood.css">
<script src=http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js ></script>
<script src="ericWood.js"></script>
<style>
body {
height:1150px;
width:1280px;
}
#advertising {
background:olive;
width:20%;
height:1000px;
float:right;
}
#sidebar {
height:1000px;
}
#footer {
height:50px;
width:1280px;
background:black;
text-align:center;
clear:both;
}
p {
font-size: 22pt;
}
#content {
text-align:center;
}
</style>
</head>
<body>
<header>
<div id="header" id="png"><span id="someId"><h1>Eric Thomas Wood</h1></span></div>
<h3>Today is <span id = "dtField"></span>
</h3>
</header>
<div id="sidebar"><h2>About me</h2>
<nav>
<details>
<summary>Page Content</summary>
<ul>
<li>
<p>Please click <a href="dioPage2.html">Nikki</a> to learn about my lovely wife Nikki</p>
</li>
<li>
<p>Please click <a href="dioPage3.html">Rachel and Bekah</a> to learn about my awesome children</p>
</li>
<li>
<p>Please click <a href="dioPage4.html">Nick and Savanna</a> to learn about my amazing stepchildren</p>
</li>
<li>
<p>Please click <a href="dioPage4.html">Bubba and Lexi</a> to learn about our pets</p>
</li>
<li>
<p>Please click <a href="dioPage4.html">More Eric</a> to for more about me</p>
</li>
</ul>
</details>
</nav>
</div>
<div id="content">
<p>My name is Eric Wood! I am first and formost a family man, a husband and father of four wonderful children. As with most
people I am sure, I have evolved and adapted to life's challenges in my 37 short years. I am a musician at heart as I played
trombone for over ten years and was quite good at it. Music is what I first went to college for until I managed to earn a
position with the post office and started a family. Fast forward a failed marriage, two wonderful girls, and losing my career
job, I am remarried with an additional two stepchildren, an amazing wife, and I am enrolled at University of Phoenix about to
complete my IT degree. Life has been hard at times but the future looks amazing.</p>
</div>
<div id="advertising">
<audio id = "audioTrack">
<source src = "howBlueCanYouGet.mp3" type = "audio/mpeg">
<source src = "howBlueCanYouGet.ogg" type = "audio/ogg">
Your browser does not support the audio element.
</audio>
<div id = "controls">
<progress></progress>
<div id = "buttons" style = "padding:5px;">
<a href = "#" id = "play">Play</a>
<a href = "#" id = "pause">Pause</a>
<a href = "#" id = "stop">Stop</a>
</div>
<input type="range" min="0" max="100" value="0" id="setLocation"/>
</div>
</div>
<script>
$("audio").on('timeupdate', function(evt){
var duration = evt.target.duration;
var current = evt.target.currentTime;
$('progress').val(current/duration);
});
$('#play').click(function(evt) {
evt.preventDefault();
$("audio")[0].play();
});
$('#pause').click(function(evt) {
evt.preventDefault();
$("audio")[0].pause();
});
$('#stop').click(function(evt) {
evt.preventDefault();
$("audio")[0].currentTime = 0;
$("audio")[0].pause();
});
$('#setLocation').change(function(evt) {
var val = $(evt.target).val();
var duration = $("audio")[0].duration;
var location = duration*(parseInt(val)/100);
$("audio")[0].currentTime = location;
$("audio")[0].play();
});
</script>
<div id="footer"><strong>Copyright © 2016</strong></div>
</body>
</html>
私は厳しくクラスから任意のビデオチュートリアルと測定値と直接滞在していますと、問題が何であるかを知りません。それはうまくいくはずですが、そうではありません。どんな助けも大歓迎です。
あなたのコードをhttps://jsfiddle.net/に入れて、これまでに行ったことを実行できるようにしてください。 –