尝试在HTML5中添加音频元素

Hello I am working on a school project that would add audio to html for a webpage. I have everything typed up and whereas I have the physical controls, actually two places in error, but am getting no audio. I need to add the video element but I'm sure once I have this figured out that will be relatively simple. Here is my code:

您好我正在研究一个学校项目,该项目将为网页添加音频到html。我有所有类型的东西,而我有物理控件,实际上有两个错误的地方,但我没有音频。我需要添加视频元素,但我确信一旦我弄清楚它会相对简单。这是我的代码:

<!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 &copy 2016</strong></div>

</body>
</html>

I don't know what the issue is as I'm strictly staying directly with any video tutorials and readings from the class. It should be working but is not. Any help is much appreciated.

我不知道是什么问题,因为我严格要求直接使用课堂上的任何视频教程和阅读材料。它应该工作但不是。任何帮助深表感谢。

3 个解决方案

#1

maybe your browser don't support audio/video Browser Support

也许您的浏览器不支持音频/视频浏览器支持

#2

When you have set an id for an element, it might be a good idea to use them.

为元素设置id后,使用它们可能是个好主意。

<audio id="audioTrack">

To use the element above with the id, change:

要使用带有id的上述元素,请更改:

$("audio")[0].play();

to:

$("#audioTrack")[0].play();

You can also use the audio element like this to get an actual player with HTML5, if you don't want to reinvent the wheel with your own timeline thing:

如果您不想使用自己的时间轴事物重新发明*,您还可以使用这样的音频元素来获得HTML5的实际玩家:

<audio controls>

Fiddle: https://jsfiddle.net/62uv4auo/1/ (edit: forgot to update the fiddle)

小提琴:https://jsfiddle.net/62uv4auo/1/(编辑:忘了更新小提琴)

#3

I figured out what my issue was. There was no closing tag for the source tag. It should look like this.

我弄清楚我的问题是什么。源标记没有结束标记。它看起来应该是这样的。

<source src = "howBlueCanYouGet.mp3" type = "audio/mpeg" />

#1