尝试在 HTML5 中添加音频元素

Posted

技术标签:

【中文标题】尝试在 HTML5 中添加音频元素【英文标题】：Trying to add audio element within HTML5 【发布时间】：2016-03-27 20:26:26 【问题描述】：

您好，我正在开展一个学校项目，该项目将向网页的 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>

我不知道问题出在哪里，因为我严格遵守课堂上的任何视频教程和阅读材料。它应该工作，但不是。非常感谢任何帮助。

【问题讨论】：

请将您的代码放入jsfiddle.net，以便我们执行您目前所拥有的。 【参考方案1】：

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

【讨论】：

我相当肯定它确实如此，因为我只是在 chrome 中使用 mp3。【参考方案2】：

当您为元素设置了 id 后，使用它们可能是个好主意。

<audio id="audioTrack">

要将上面的元素与 id 一起使用，请更改：

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

到：

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

如果你不想用你自己的时间线重新发明***，你也可以使用这样的音频元素来获得一个真正的 HTML5 播放器：

<audio controls>

小提琴：https://jsfiddle.net/62uv4auo/1/（编辑：忘记更新小提琴）

【讨论】：

我考虑过只使用 ，但想为项目增添活力。它是否具有适用于所有浏览器的跨浏览器功能？ 我已经完全按照你说的做了，甚至尝试了小提琴中的代码，但我没有从 chrome 中的页面获得音频。 您在 Chrome 中是否有任何声音？你运行的是什么操作系统？ 您可以使用以下链接在您的浏览器中试用 和不同的格式：hpr.dogphilosophy.net/test/index.php您也可以使用此站点检查任何元素的跨浏览器功能：caniuse.com/#feat=audio跨度> 我尝试了链接并获得了音频，但在 chrome 上加载页面时却没有。【参考方案3】：

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

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

【讨论】：

以上是关于尝试在 HTML5 中添加音频元素的主要内容，如果未能解决你的问题，请参考以下文章

HTML5 音频播放器。无法更改 src 元素

在 html5 音频元素到达播放结束前 5 秒执行 Javascript 代码

2 个音频声音，我想一次播放一个 HTML5 音频元素

如何用HTML5向网页中插入音频

如何使用 javascript 控制 HTML5 音频标签

Safari 音频 HTML5 问题