title: It always becomes 0 regardless of what is set to the currentTime of the audio tag
body: <p>I am making a player that can play music with a Web browser, but I am in trouble because I can not change the playback position.  (currentTime)</p>
  
  <p>Specifically, even if we assign a numeric value to the currentTime of mp3 music read with the audio tag of html 5, it will always be 0.</p>
  
  <pre><code>   &lt;audio id="audio" class="back-player"  preload="auto"&gt;
      &lt;source src="/audios/&lt;?= $source ?&gt;" type="&lt;?= $mime ?&gt;" /&gt;
    &lt;/audio&gt;
  </code></pre>
  
  <p><strong>version</strong></p>
  
  <ul>
  <li>HTML5</li>
  <li>jQuery: 2.23</li>
  </ul>
  
  <p><img src="https://i.stack.imgur.com/3JV4e.png" alt="click input"></p>
  
  <p><strong>not working</strong></p>
  
  <pre><code> $(document).on('change','.js-play-position',function(e) {
    var audio = document.getElementById('audio');
    val = $(this).val();
    val = Number(val);
    audio.currentTime = val;
  });
  </code></pre>
  
  <p><strong>working</strong></p>
  
  <pre><code>$('.js-play').click(function()
  {
      var audio = document.getElementById('audio');
      audio.play();
      $('.js-play').addClass('hidden');
      $('.js-pause').removeClass('hidden');
  });
  </code></pre>
  
  <p><strong>working</strong></p>
  
  <pre><code> $( '.js-volume' ).change( function () {
          var audio = document.getElementById('audio');
      var val = $(this).val();
      var val = (val*0.01);
      audio.volume = val;
    } );
  </code></pre>
  
  <p>I do not know why the only currentTime does not work. Is it wrong to write?
  please teach me.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media only screen and (max-width: 1023px) {
    .audioplayer{display:none;}
    #audio-area {width: 100vw; position: relative;}
    #audio-area:before {
      z-index: 0;
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color:rgba(0,0,0,0.25);
    }
    .audio-container{position: relative; z-index:2;}
    .audio__tag{color: #FFF; font-size: 11px; margin-top: 10px;}
    .audio__tag:before{font-family:'FontAwesome'; color: #FFF;  content: "\f02b";}
    .audio__title{font-size:14px; padding: 0.5em; color: #FFF; background-color: #000;}
    .audio__name{display: inline-block; color: #FFF; font-size:12px; background-color: #000; padding: 0.5em;}
    .audio__controll{width:100%; border-radius: 3px; background-color: #FFF; opacity: 0.9; margin-bottom: 10px; overflow: hidden;}
    /*　再生エリア */
    .audio-loader{
      position: absolute;
      top: 33%;
      left: 50%;
      transform: translateX(-50%);
      z-index: 999;
      text-align: center;
    }
    .fa-spinner:before {font-size: 50px;}
    input[type=range].controll-play-position{width:90%; margin: 20px 5%;}
    .controll-position{display:flex;  justify-content: space-between; width: 80%; margin: 10px 10%; list-style: none; padding-left:0;}
    .position-now{display: block; width: 90%; margin: 10px 5% 10px 2%; height: 1em;}
    .position-start{margin-left: 5%;}
    .position-end{position:absolute; right: 5%; margin-right: 3%;}
    .controll-position__link{color: #000;}
    .controll-position__back{text-align:center; font-size:11px; font-weight: bold;}
    .controll-position__10sback{text-align:center; font-size:11px;font-weight: bold;}
    .controll-position__pause{text-align:center; font-size:11px;font-weight: bold;}
    .controll-position__play{text-align:center; font-size:11px;font-weight: bold;}
    .controll-position__10sforward{text-align:center; font-size:11px;font-weight: bold;}
    .controll-position__forward{text-align:center; font-size:11px;font-weight: bold;}
    .controll-position__back:before {font-family:FontAwesome; content: "\f049";display: block; position:relative; font-size:30px;font-weight: 400;}
    .controll-position__10sback:before {font-family:FontAwesome; content: "\f04a";display: block; position:relative; font-size:30px;font-weight: 400;}
    .controll-position__pause:before {font-family:FontAwesome; content: "\f04c";display: block; position:relative; font-size:30px;font-weight: 400;}
    .controll-position__play:before {font-family:FontAwesome; content: "\f04b";display: block; position:relative; font-size:30px;font-weight: 400;}
    .controll-position__10sforward:before {font-family:FontAwesome; content: "\f04e";display: block; position:relative; font-size:30px;font-weight: 400;}
    .controll-position__forward:before {font-family:FontAwesome; content: "\f050";display: block; position:relative; font-size:30px;font-weight: 400;}
    .controll-bottom{width:90%; margin: 20px 5%; overflow: auto;}
    .controll-speed{font-size: 11px; padding-left: 0; padding-right:10px;}
    @media only screen and (max-width: 320px) {.controll-speed{font-size: 9px;}}
    .controll-speed-list{list-style: none; display:flex; padding-left:0; padding-right:0; -webkit-justify-content: space-between; /* Safari */justify-content: space-between;}
    .controll-speed__minus{font-weight:bold; padding: 0 2vw;}
    .controll-speed__minus:active{background-color: #E5E5E5; transition-property: background;  transition-duration: 0.5s transition-delay: 0.5s transition-timing-function: ease-in;}
    .controll-speed__minus:before {font-family:FontAwesome; content: "\f068";display: block; position:relative; margin-bottom: 5px; font-size:20px;font-weight:400;}
    .controll-speed__refresh{font-weight:bold;}
    .controll-speed__refresh:active{background-color: #E5E5E5; transition-property: background;  transition-duration: 0.5s transition-delay: 0.5s transition-timing-function: ease-in;}
    .controll-speed__refresh:before {font-family:FontAwesome; content: "\f01e";display: block; position:relative;margin-bottom: 5px; font-size:20px; text-align:center;font-weight:400;}
    .controll-speed__plus{font-weight:bold; padding: 0 2vw;}
    .controll-speed__plus:active{background-color: #E5E5E5; transition-property: background;  transition-duration: 0.5s transition-delay: 0.5s transition-timing-function: ease-in;}
    .controll-speed__plus:before {font-family:FontAwesome; content: "\f067";display: block; position:relative;margin-bottom: 5px; font-size:20px;font-weight:400;}
    .controll-volume{width: 50%; padding-right: 0; padding-left: 0; padding-top: 10%;}
    @media only screen and (min-width: 551px) {.controll-volume{padding-top: 5%;}}
    input[type=range].controll-volume__main{display:inline-block; width:80%; position:absolute; top:40%; left: 20%;}
    .icon-volume-down{position: absolute; top: 10%; left: 10px;}
    @media only screen and (min-width: 551px) {.icon-volume-down{left: 0px;}}
    .icon-volume-down i{font-size: 15px;}
    .icon-volume-up{position: absolute; top: 10%; right: -23px;}
    @media only screen and (max-width: 320px) {.icon-volume-up{right: -19px;}}
    @media only screen and (min-width: 551px) {.icon-volume-up{right: -30px;}}
    .icon-volume-up i{font-size: 15px;}
  
    input[type=range] {-webkit-appearance:none; background-color:#95989A; height: 2px;}
    input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; height:17px; width:17px; border-radius: 17px; background-color:#555; border: none;}
  
    /* アイコンたち */
    .fal,.fas{font-family: FontAwesome; font-style: normal; font-size: 20px;}
    .audio__actions{display: flex; display: -webkit-flex; /* Safari */ text-align: center; width: 100%;}
    .actions{width: 20%; padding: 5px; padding-bottom: 10px; position:relative;}
    .actions--active{background-color: #FFF; border-radius: 5px 5px 0 0;}
    .fa-heart:before {color: #fff;}
    .fa-comment:before {color: #fff;}
    .fa-comment--active:before {color: #00357E;}
    .fa-bookmark {color: #fff;}
    .fa-bookmark--active:before {color: #00357E;}
    .fa-repeat:before,.fa-repeat-1:before{color: #FFF;}
    .fa-file-alt{color: #FFF;}
    .audio-comment__num{font-size: 13px; color: #FFF; position:absolute; top: 10px; right: 3px;}
    .audio-action__string{color: #FFF; font-size: 1vw; margin-bottom: 0; margin-top: 0.5vh;}
    .audio-action__string--active{color: #00357E;}
  
    /*アコーディオン */
    .audio-acordion{display:none;}
    .audio-comment__title{font-size: 14px; color: #00357E;}
    .audio-comment__form{resize: none; margin-bottom: 8px;}
    .audio-comment__review-title{font-size: 16px; text-align:center; color: #000; padding-bottom: 6px; border-bottom: 1px solid #000;}
    .review-wrapper{margin-bottom:15px; padding: 10px 0; border-bottom: 1px solid #DEDEDE;}
    .reviewer{margin-bottom:10px;}
    .reviewer__image{display: inline-block; height:40px; width: 40px; object-fit: cover; border-radius: 40px; -webkit-border-radius: 40px; background-color: #ccc;}
    .reviewer__name{display: inline-block; margin-left: 10px;}
    .chapter-item{margin-bottom:10px; padding-bottom:10px; border-bottom: 1px solid #EBECEC;}
    .chapter-heading{display: inline-block; width: 10%; object-fit: cover; vertical-align: unset;}
    .chapter-strings{display: inline-block; margin-left: 10px; width: 85%;}
    .chapter-strings__no{font-size: 12px; color: #0B3862; margin-bottom: 5px;}
    .chapter-strings__title{font-size: 13px; font-weight: bold; margin:0 0 5px; white-space: nowrap; overflow:hidden; text-overflow: ellipsis;}
  
    /* 追加コンテンツ */
    .more-contents__heading{font-size:20px; font-weight:bold; text-align:center; margin-bottom: 20px;}
    .audio-tabs{width: 100vw; border-bottom:1px solid #ccc; margin-bottom:10px;}
    .nav&gt;li&gt;span.audio-tabs__list{font-size: 14px; padding:20px; margin-right: 0; border: none; color: #888585;}
    @media only screen and (max-width: 320px) {.nav&gt;li&gt;span.audio-tabs__list{font-size: 12px;}}
    .active{border-bottom:1px solid #666;}
    .nav&gt;li.active&gt;span.audio-tabs__list{font-weight:bold; color: #000;}/*選択中のタブ*/
    .more-contents__podcast{width: 100%; border-bottom:1px solid #95989A;}
    .podcast-contents-wrap{margin: 0; padding: 6px 0; border-bottom: 1px solid #95989A;}
    .podcast-contents__title{font-size:13px; color: #00357E; font-wight: bold; margin-bottom: 10px;}
    .podcast-contents__publish{font-size:12px; padding: 0;}
    @media only screen and (max-width: 320px) {.podcast-contents__publish{font-size:9px;}}
    .podcast-contents__publish:before{font-family:FontAwesome; content:'\f133'; margin-right: 4px;}
    .podcast-contents__time{font-size:12px; padding:0; padding-left: 10px;}
    @media only screen and (max-width: 320px) {.podcast-contents__time{font-size:9px;}}
    .podcast-contents__time:before{font-family:FontAwesome; content: '\f017'; margin-right: 4px;}
    .podcast-contents__likes{font-size:12px; padding: 0;}
    @media only screen and (max-width: 320px) {.podcast-contents__likes{font-size:9px;}}
    .podcast-contents__likes:before{font-family:FontAwesome; content:'\f004'; margin-right: 4px; color: #F50B6B;}
    .podcast-contents__comments{font-size:12px; padding:0;}
    @media only screen and (max-width: 320px) {.podcast-contents__comments{font-size:9px;}}
    .podcast-contents__comments:before{font-family:FontAwesome; content:'\f075'; margin-right: 4px; color: #003383;}
    .podcast-contents__summary{margin-top: -4px;}
    .more-summary__icon{color: #000;}
    .more-contents__pause{font-size: 18px; color: #FFF; margin-bottom: 10vh; /* for iOS */ -webkit-appearance: none; border-radius: 0; border: none;/*for Android */ background-color: #000;}
    .more-contents__pause:before{margin: 8vh 0 10px;}
    @media only screen and (max-width: 320px) {.more-contents__pause:before{margin-top: 0px;}}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html dir="ltr" lang="ja"&gt;
  &lt;head&gt;
  &lt;link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  $(function(){
    windowWidth = $(window).width(); 
   
   $('.js-rate').click(function()
   {
    var mode = $(this).attr('rel');
  
    if(mode == '0')
    {
     rate = 1.0;
    }
    else if(mode == '+' &amp;&amp; rate &lt; 2)
    {
     rate += 0.25;
    }
    else if(mode == '-' &amp;&amp; rate &gt; 0.5)
    {
     rate -= 0.25;
    }
      var audio = document.getElementById("audio");
      audio.playbackRate = rate;
   });
  
   $('.js-play').click(function()
   {
    var audio = document.getElementById('audio');
    audio.play();
    $('.js-play').addClass('hidden');
    $('.js-pause').removeClass('hidden');
   });
    
   $('.js-pause').click(function()
   {
    var audio = document.getElementById('audio');
    audio.pause();
    $('.js-pause').addClass('hidden');
    $('.js-play').removeClass('hidden');
   });
  
    $( '.js-10s-back' ).click( function () {
    var audio = document.getElementById('audio');
      audio.currentTime -= 10;
    } );
  
    $( '.js-10s-forward' ).click( function () {
    var audio = document.getElementById('audio');
      audio.currentTime += 10;
    } );
  
    $( '.js-volume' ).change( function () {
    var audio = document.getElementById('audio');
      var val = $(this).val();
      var val = (val*0.01);
      audio.volume = val;
    } );
  
    $( '.js-loop' ).click( function () {
    var audio = document.getElementById('audio');
      if (audio.loop == false)
      {
        audio.loop = true;
        $('[id=js-loop-icon]').removeClass('fa-repeat');
        $('[id=js-loop-icon]').addClass('fa-repeat-1');
      }else {
        audio.loop = false;
        $('[id=js-loop-icon]').addClass('fa-repeat');
        $('[id=js-loop-icon]').removeClass('fa-repeat-1');
      }
    });
  
  
      //inputの変更を再生位置に反映
      //動的に生成したDOMに関しては以下のクリックイベントを使用
      $(document).on('change','.js-play-position',function(e) {
        var audio = document.getElementById('audio');
        val = $(this).val();
        val = Number(val);
        console.log('console:val=' + val)
        audio.oncanplay = function() {
              audio.currentTime = val;
              console.log(audio.currentTime)
        };
      });
  
    //1秒ごとに再生位置を監視→input要素に反映
    setInterval(function(){
      //スクロール位置監視　→　コンテンツ追加読み込み
      var audio = document.getElementById('audio');
      var time = audio.currentTime;
      $('[id=js-play-position]').val(time);
   },1000);
  
  
  
  });
  
  //動的に再生位置バーを生成
  $(window).on("load", function(){
      var audio = document.getElementById('audio');
      var front = '&lt;input type="range" class="controll-play-position js-play-position" id="js-play-position" value="0" min="0" max="';
      var last = '"&gt;';
      $('[id=js-position-now]').after(front + audio.duration + last);
  
      //再生終了時間の計算
      var minute = Math.floor(audio.duration/60);
      minute = ( '00' + minute ).slice( -2 ); // 先頭に0を足してから2桁に整形
      var sec = Math.floor(audio.duration%60);
      sec = ( '00' + sec ).slice( -2 );
      $('[id=js-position-end]').text(minute + ':' + sec);
  
      //現在位置の表示
      TOTAL = Math.round(audio.duration);
      audio.addEventListener("timeupdate", function() {
          var NOW = Math.round(audio.currentTime);
          if(windowWidth &lt; 1023){var PERCE = (NOW / TOTAL * 100 * 0.99) + '%';}
          if(windowWidth &gt; 1023){var PERCE = (NOW / TOTAL * 100 * 0.90) + '%';}
          if(windowWidth &gt; 1023)
          {
            $('[id=js-position-now]').css({'position':'absolute', 'left': PERCE});
          }
          if(windowWidth &lt; 1023)
          {
            $('[id=js-position-now]').css({'position':'relative', 'left': PERCE});
          }
          //現在時間の表示
          var nowTime = Math.round(audio.currentTime);
          var min = Math.floor(nowTime / 60);
          min = ( '00' + min ).slice( -2 ); // 先頭に0を足してから2桁に整形
          var sec = nowTime % 60;
          sec = ( '00' + sec ).slice( -2 );
          $('[id=js-position-now]').text(min + ':' + sec);
      }, true);
      $("[id=js-dummy-play-position]").remove();
      $("[id=js-loader]").remove();
      $('[id=js-audio-wrap&lt;?= $id ?&gt;]').addClass('audio-active');
  
  });
  
  &lt;/script&gt;
  
  
  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;audio id="audio" class="back-player"  preload="auto"&gt;
      &lt;source src="http://www.ne.jp/asahi/music/myuu/wave/menuettm.mp3" type="" /&gt;
    &lt;/audio&gt;
   &lt;section class="movie-watch hidden  visible-xs visible-sm"&gt;
      &lt;div class="audio-loader" id="js-loader"&gt;
        &lt;i class="far fa-spinner fa-spin"&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div id="audio-area" class="audio-area"&gt;
        &lt;div class="container audio-container"&gt;
          &lt;p class="audio__tag"&gt;   &lt;?= $categories[0]['name'] ?&gt;&lt;/p&gt;
          &lt;p class="audio__title"&gt;&lt;?= $title ?&gt;&lt;/p&gt;
          &lt;p class="audio__name"&gt;&lt;?= $teacher_name ?&gt;&lt;/p&gt;
          &lt;div class="audio__controll"&gt;
            &lt;span class="position-now" id="js-position-now" class="js-position-now"&gt;00:00&lt;/span&gt;
            &lt;input type="range" class="controll-play-position" id="js-dummy-play-position" value="0" min="0" max=""&gt;
            &lt;span class="position-start" id="js-position-start"&gt;00:00&lt;/span&gt;
            &lt;span class="position-end" id="js-position-end"&gt;&lt;/span&gt;
            &lt;ul class="controll-position"&gt;
              &lt;li class="controll-position__back" onclick="back(json_now.id)"&gt;前へ&lt;/li&gt;
              &lt;li class="controll-position__10sback js-10s-back"&gt;10秒戻る&lt;/li&gt;
              &lt;li class="js-play controll-position__play"&gt;　再生　&lt;/li&gt;
              &lt;li class="js-pause controll-position__pause hidden"&gt;一時停止&lt;/li&gt;
              &lt;li class="controll-position__10sforward js-10s-forward"&gt;10秒進む&lt;/li&gt;
              &lt;li class="controll-position__forward" onclick="next(json_now.id)"&gt;次へ&lt;/li&gt;
            &lt;/ul&gt;
            &lt;div class="controll-bottom"&gt;
              &lt;div class="controll-speed col-xs-5"&gt;
                &lt;ul class="controll-speed-list"&gt;
                &lt;li class="js-rate controll-speed__minus" rel="-"&gt;遅く&lt;/li&gt;
                &lt;li class="js-rate controll-speed__refresh" rel="0"&gt;リセット&lt;/li&gt;
                &lt;li class="js-rate controll-speed__plus" rel="+"&gt;早く&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="controll-volume col-xs-7"&gt;
                &lt;span class="icon-volume-down"&gt;&lt;i class="fal fa-volume-mute"&gt;&lt;/i&gt;&lt;/span&gt;
                &lt;input type="range" class="js-volume controll-volume__main" value="50" min="0" max="99"&gt;
                &lt;span class="icon-volume-up"&gt;&lt;i class="fal fa-volume-up"&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
      &lt;/body&gt;
    &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>