CODEWITHSUNDEEP
javascriptjqueryhtmlaudiomp3
Eric Wood
Eric Wood

Reputation: 61

Trying to add audio element within 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:

<!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.

Upvotes: 1

Views: 257

Answers (3)

Eric Wood
Eric Wood

Reputation: 61

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" />

Upvotes: 0

naslund
naslund

Reputation: 625

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

<audio id="audioTrack">

To use the element above with the id, change:

$("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:

<audio controls>

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

Upvotes: 1

Amir daraei
Amir daraei

Reputation: 63

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

Upvotes: 1

Related Questions