audio.currentTime 失效問題：
1.我用的是idea，idea自帶的server返回mp3的header中沒有Content-Range；後面我換成了tomcat服務器就沒問題了，純頁面的話直接絕對路徑訪問就沒問題了。
<!DOCTYPE html>
<html lang="zh-CN">
<meta name="viewport" http-equiv="Content-Type"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no,charset=utf-8">
<head>
<title>李蔚農宣講</title>
</head>
<link rel="stylesheet" type="text/css" href="../css/public.css">
<link rel="stylesheet" type="text/css" href="../css/lwn-preach.css">
<script src="../lib/jquery.min.js"></script>
<style type="text/css">
body, div {
padding: 0;
margin: 0;
}
.m-main {
/*width:560px;*/
/*height: 100%;*/
/*margin: 3% auto;*/
/*background-color: #30a5ff;*/
}
.m-main video {
display: none;
}
.m-main .player {
width: 100%;
height: 60px;
position: relative;
bottom: 20px;
}
.m-main .player > a {
display: inline-block;
width: 20%;
margin: 0 auto;
padding: 5%;
color: #FFF;
text-align: center;
}
.m-main .play-box {
width: 100%;
margin: 0 auto;
}
.m-main .play-box .left {
width: 100%;
float: left;
}
.m-main .play-box .left p.timeline {
width: 60%;
height: 10px;
background-color: rgba(216, 216, 216, 0.5);
border-radius: 5px;
margin: 30px auto 0;
position: relative;
z-index: 2;
}
.m-main .play-box .left p.timeline span {
position: relative;
width: 0px;
height: 10px;
background-color: #FFF;
border-radius: 5px;
display: block;
-webkit-transition: width ease-out 0.3s;
-o-transition: width ease-out 0.3s;
transition: width ease-out 0.3s;
}
.m-main .play-box .left p.timeline span:after {
content: "";
position: absolute;
top: -4px;
right: -0.6rem;
width: 1.2rem;
height: 1.2rem;
border-radius: 50%;
background-color: #FFF;
}
.m-main .play-box .left div.info {
height: 26px;
line-height: 26px;
font-size: 14px;
color: #000;
position: relative;
top: -18px;
/*margin:0 10px; */
z-index: 1;
color: #FFF;
}
.m-main .play-box .left div.info .size {
float: left;
display: block;
}
.m-main .play-box .left div.info .timeshow {
float: right;
display: block;
}
</style>
<style>
* {
margin: 0;
padding: 0;
}
.scroll {
margin: 100px;
width: 500px;
height: 5px;
background: #ccc;
position: relative;
}
.bar {
width: 10px;
height: 20px;
background: #369;
position: absolute;
top: -7px;
left: 0;
cursor: pointer;
}
.mask {
position: absolute;
left: 0;
top: 0;
background: #369;
width: 0;
height: 5px;
}
</style>
<style type="text/css">
.progress {
position: relative;
width: 220px;
margin: 20px auto;
}
.progress_bg {
height: 10px;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
background-color: #f2f2f2;
}
.progress_bar {
background: #5FB878;
width: 0;
height: 10px;
border-radius: 5px;
}
.progress_btn {
width: 20px;
height: 20px;
border-radius: 5px;
position: absolute;
background: #fff;
left: 0px;
margin-left: -10px;
top: -5px;
cursor: pointer;
border: 1px #ddd solid;
box-sizing: border-box;
}
.progress_btn:hover {
border-color: #F7B824;
}
.timeLeft {
display: inline-block;
margin-left: -35px;
margin-right: 7px;
color: #ffffff;
}
.timeCenter {
display: inline-block;
}
.timeRight {
display: inline-block;
margin-right: -90px;
color: #ffffff;
}
</style>
<body>
<div>
<div class="timeLeft" style="display: inline-block">
<span class="size">00:00</span>
</div>
<div class="timeCenter" style="display: inline-block">
<div class="progress">
<div class="progress_bg">
<div class="progress_bar"></div>
</div>
<div class="progress_btn"></div>
</div>
</div>
<div class="timeRight">
<span class="timeshow">00:00</span>
</div>
</div>
<div class="video">
<audio loop src="../image/xxxx.mp3" id="js-video" autoplay preload="auto">該瀏覽器不支持audio屬性
</audio>
</div>
</body>
</html>
<script type="text/javascript">
var flag = 0;
function startplay(t) {
var x = document.getElementById('js-video');
{
if (flag == 0) {
flag = 1;
x.autoplay = "autoplay";
x.load();
}
x.currentTime = (t / 100) * audio.duration;
x.play();
setTimeShow(x.currentTime);
}
}
var audio = document.getElementById('js-video');
$(audio).on('loadedmetadata', function () {
audio.pause();
// 進度條控制
// $(document).on('touchend', '.timeline', function (e) {
// var x = e.originalEvent.changedTouches[0].clientX - this.offsetLeft;
//
// var X = x < 0 ? 0 : x;
// var W = $(this).width();
// var place = X > W ? W : X;
// // audio.currentTime = (place / W).toFixed(2) * audio.duration;
// // $(this).children().css({width: (place / W).toFixed(2) * 100 + "%"})
// });
touch.addEventListener("touchstart", handleStart, false); // 觸摸開始
touch.addEventListener("touchmove", handleMove, false); // 開始移動
touch.addEventListener("touchend", handleEnd, false); // 觸摸結束
// 播放
// $(document).on('click', '#js-play', function () {
// audio.play()
// });
// // 暫停
// $(document).on('click', '#js-pause', function () {
// audio.pause()
// });
})
// 設置播放時間
function setTimeShow(t) {
t = Math.floor(t);
var playTime = secondToMin(audio.currentTime);
$(".size").html(playTime);
$('.timeshow').text(secondToMin(audio.duration))
$('.timeline').children().css({width: (t / audio.duration).toFixed(4) * 100 + "%"});
document.querySelector('.progress_bar').style.width = (t / audio.duration).toFixed(4) * 100 + "%";
document.querySelector('.progress_btn').style.left = (t / audio.duration).toFixed(4) * 100 + "%";
//時間進度計算
var jd = {width: (t / audio.duration).toFixed(4) * 100 + "%"};
}
// 計算時間
function secondToMin(s) {
var MM = Math.floor(s / 60);
var SS = s % 60;
if (MM < 10)
MM = "0" + MM;
if (SS < 10)
SS = "0" + SS;
var min = MM + ":" + SS;
return min.split('.')[0];
}
var a = false;
setInterval(function () {
var currentTime = audio.currentTime;
console.log("currentTime=" + currentTime)
setTimeShow(currentTime);
}, 1000);
document.onmouseup = function () {
document.onmousemove = null; //彈起鼠標不做任何操作
}
// https://blog.csdn.net/Candy_home/article/details/78392556
// 獲取要操作的元素
var playBtn = document.getElementById("playBtn");
function stopBtns() {
play()
// playBtn.html = "";
// playBtn.innerHTML = '<img src="../image/preach1_02.png">';
}
// 控制audio的播放
function play() {
if (audio.paused || audio.ended) {
if (audio.ended) {
// audio.currentTime = 0;
}
audio.play();
// playBtn.innerHTML = "暫停";
playBtn.html = "";
playBtn.innerHTML = '<img src="../image/preach1_03.png">';
} else {
audio.pause();
// playBtn.innerHTML = "播放";
playBtn.html = "";
playBtn.innerHTML = '<img src="../image/preach1_02.png">';
}
}
audio.addEventListener("canplay", function () {//監聽audio是否加載完畢，如果加載完畢，則讀取audio播放時間
console.log('mp3加載完成............')
// that.loading = false;
playBtn.html = "";
playBtn.innerHTML = '<img src="../image/preach1_03.png">';
myVid = document.getElementById("js-video");
myVid.oncanplay = audio.play();
});
// < /script>
//<script type="text/javascript">
var width = document.querySelector('.progress').offsetWidth;
// 拖拽事件
var touch = document.querySelector('.progress_btn');
var x1, y1, oldTime, newTime, olfLeft, newLeft;
function handleStart(e) {
e.preventDefault();
var touches = e.changedTouches;
x1 = touches[0].pageX;
y1 = touches[0].pageY;
olfLeft = document.querySelector('.progress_btn').offsetLeft;
}
function handleMove(e) {
e.preventDefault();
var x2 = e.changedTouches[0].pageX;
newLeft = x2 - x1;
nowLeft = olfLeft + newLeft;
if (nowLeft < 0) {
nowLeft = 0;
}
if (nowLeft > width) {
nowLeft = width;
}
document.querySelector('.progress_bar').style.width = nowLeft + "px";
document.querySelector('.progress_btn').style.left = (nowLeft - (nowLeft > (width - 10) ? 10 : 5)) + "px";
var per = nowLeft / width;
console.log(per);
audio.currentTime = per * audio.duration;
// console.log(per * audio.duration)
}
function handleEnd(e) {
audio.play();
touch.removeEventListener("touchmove", handleEnd, false);
}
function stopBtnss() {
audio.currentTime = 0.65666 * audio.duration;
console.log("audio.currentTime==" + audio.currentTime + "audio.duration==" + audio.duration);
audio.play();
}
</script>