Он всегда становится равным 0 независимо от того, что установлено в currentTime аудиотега.

Я делаю проигрыватель, который может воспроизводить музыку с помощью веб-браузера, но у меня проблемы, потому что я не могу изменить положение воспроизведения. (Текущее время)

В частности, даже если мы присвоим числовое значение currentTime mp3-музыки, прочитанной с аудиотегом html 5, оно всегда будет равно 0.

   <audio id="audio" class="back-player"  preload="auto">
    <source src="/audios/<?= $source ?>" type="<?= $mime ?>" />
  </audio>

версия

HTML5
jQuery: 2.23

щелкните ввод

не работает

 $(document).on('change','.js-play-position',function(e) {
  var audio = document.getElementById('audio');
  val = $(this).val();
  val = Number(val);
  audio.currentTime = val;
});

работает

$('.js-play').click(function()
{
    var audio = document.getElementById('audio');
    audio.play();
    $('.js-play').addClass('hidden');
    $('.js-pause').removeClass('hidden');
});

работает

 $( '.js-volume' ).change( function () {
        var audio = document.getElementById('audio');
    var val = $(this).val();
    var val = (val*0.01);
    audio.volume = val;
  } );

Не знаю, почему только currentTime не работает. Неправильно ли писать? пожалуйста, научите меня.

@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>li>span.audio-tabs__list{font-size: 14px; padding:20px; margin-right: 0; border: none; color: #888585;}
  @media only screen and (max-width: 320px) {.nav>li>span.audio-tabs__list{font-size: 12px;}}
  .active{border-bottom:1px solid #666;}
  .nav>li.active>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;}}
}

<!DOCTYPE html>
<html dir="ltr" lang="ja">
<head>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">

$(function(){
  windowWidth = $(window).width(); 
	
	$('.js-rate').click(function()
	{
		var mode = $(this).attr('rel');

		if(mode == '0')
		{
			rate = 1.0;
		}
		else if(mode == '+' && rate < 2)
		{
			rate += 0.25;
		}
		else if(mode == '-' && rate > 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 = '<input type="range" class="controll-play-position js-play-position" id="js-play-position" value="0" min="0" max="';
    var last = '">';
    $('[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 < 1023){var PERCE = (NOW / TOTAL * 100 * 0.99) + '%';}
        if(windowWidth > 1023){var PERCE = (NOW / TOTAL * 100 * 0.90) + '%';}
        if(windowWidth > 1023)
        {
          $('[id=js-position-now]').css({'position':'absolute', 'left': PERCE});
        }
        if(windowWidth < 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<?= $id ?>]').addClass('audio-active');

});

</script>



</head>
<body>
  <audio id="audio" class="back-player"  preload="auto">
    <source src="https://www.ne.jp/asahi/music/myuu/wave/menuettm.mp3" type="" />
  </audio>
	<section class="movie-watch hidden  visible-xs visible-sm">
    <div class="audio-loader" id="js-loader">
      <i class="far fa-spinner fa-spin"></i>
    </div>
    <div id="audio-area" class="audio-area">
      <div class="container audio-container">
        <p class="audio__tag">   <?= $categories[0]['name'] ?></p>
        <p class="audio__title"><?= $title ?></p>
        <p class="audio__name"><?= $teacher_name ?></p>
        <div class="audio__controll">
          <span class="position-now" id="js-position-now" class="js-position-now">00:00</span>
          <input type="range" class="controll-play-position" id="js-dummy-play-position" value="0" min="0" max="">
          <span class="position-start" id="js-position-start">00:00</span>
          <span class="position-end" id="js-position-end"></span>
          <ul class="controll-position">
            <li class="controll-position__back" onclick="back(json_now.id)">前へ</li>
            <li class="controll-position__10sback js-10s-back">10秒戻る</li>
            <li class="js-play controll-position__play">　再生　</li>
            <li class="js-pause controll-position__pause hidden">一時停止</li>
            <li class="controll-position__10sforward js-10s-forward">10秒進む</li>
            <li class="controll-position__forward" onclick="next(json_now.id)">次へ</li>
          </ul>
          <div class="controll-bottom">
            <div class="controll-speed col-xs-5">
              <ul class="controll-speed-list">
              <li class="js-rate controll-speed__minus" rel="-">遅く</li>
              <li class="js-rate controll-speed__refresh" rel="0">リセット</li>
              <li class="js-rate controll-speed__plus" rel="+">早く</li>
              </ul>
            </div>
            <div class="controll-volume col-xs-7">
              <span class="icon-volume-down"><i class="fal fa-volume-mute"></i></span>
              <input type="range" class="js-volume controll-volume__main" value="50" min="0" max="99">
              <span class="icon-volume-up"><i class="fal fa-volume-up"></i></span>
            </div>
          </div>
        </div>
    </section>
    </body>
  </html>

javascript html jquery

10.08.2018

console.log(val) перед установкой currentTime. Это правильно? Кроме того, ознакомьтесь с этой публикацией, чтобы найти возможное решение. 10.08.2018
Ваш выбор диапазона идет от каких до каких значений? Ваша продолжительность СМИ, сколько? 10.08.2018
да console.log = целое число. 10.08.2018
@kaiiido мой mp3.duration = 400 ~ 1000 с. 10.08.2018
400s ~ 1000s это невозможное значение для MediaElement.duration. Пожалуйста, будьте точны. Что audio.duration выводит в вашем обработчике событий. А что выводит Number(val)? 10.08.2018
@kaiido продолжительность = 712. Число (val) = 280. 10.08.2018
Объяснения было недостаточно. То, что вы хотите сделать, это переместить позицию воспроизведения в позицию щелчка 10.08.2018
Можете ли вы поделиться своим кодом, чтобы вы могли создать работающий фрагмент? 10.08.2018
@ Такит извините. фрагмент не работает. я так не работаю в php 10.08.2018
Ну, мне было интересно, что вы можете удалить части PHP, чтобы получить фрагмент с фиксированными значениями. 10.08.2018
@Takit фрагмент создан, но неполный 10.08.2018
Вы не удалили части PHP в сценариях, расположенных в вашем HTML! :) 10.08.2018
@Takit Извините, фрагмент не работает. 10.08.2018

Новые материалы

Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…

Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

Лицензии с открытым исходным кодом: руководство для разработчиков и создателей

В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

Объяснение документов 02: BERT

BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?

Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)

Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]

Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter

Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

Метки

Machine Learning JavaScript Data Science Artificial Intelligence Software Development Python Web Development Coding Deep Learning AI React Software Engineering Nodejs Java Front End Development Typescript Computer Science Data Algorithms Development NLP Tech Programming Languages CSS ChatGPT HTML Python Programming Javascript Tips Angular Computer Vision Startup Data Visualization Neural Networks Tutorial Statistics Productivity Reactjs Learning