javascript - 无论音频标签的 currentTime 设置什么，它总是变为 0
问题描述
我正在制作一个可以通过网络浏览器播放音乐的播放器，但我遇到了麻烦，因为我无法更改播放位置。（当前时间）
具体来说，即使我们为使用html 5的audio标签读取的mp3音乐的currentTime分配一个数值，它也始终为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="http://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>解决方案
推荐阅读
- python - 正则表达式选择以特定数字开头的序列
- javascript - Woocommerce中的目标结帐页面但不是订单接收页面
- menu - Yii2：菜单没有打开网址
- php - 单选按钮值未正确推送到 SQL
- r - 在R中，基于分层数据结构从数据框中的前一行中减去值
- rest - Restful Uri结构获取相同类型的资源数组，响应中只有有限的字段？
- jena - Fuseki 服务器 - 无法加载数据集
- jquery - 如何使按钮不在表格 tds 中合并 - BS4
- c# - 实体框架自动在父表中插入新行
- javascript - SASS/SCSS @import 前面的 ~ 是什么意思/做什么？