音乐播放器补充1video值：currentTime，duration

音乐播放器补充1之前做了一个

1.实现音乐播放时：进度条会动，停止时，进度条停止，进度条显示时间？

1.实现音乐播放时：进度条会动，停止时，进度条停止，进度条显示时间？

1.音乐的：currentTime值：获取播放器播放时间数值变化的；
会随着音乐播放值：从0开始，跟着音乐播放时间，如果暂停，值也暂停

input.value=video.currentTime//
实现input值value变化，因为type是range滑动条，随着value变化，滑动条也变化，移动
duration：音乐总时间值
parseInt（）：把小数换成整数

把音乐的播放时间值给input：值

<input type="range" min="0"  max="18">

min最小值，max最大值，value设置为1，如果没有设置value那么它默认在中间value值在min和max之间

设置max=总音乐的时间
time.textContent=parseInt(video1.currentTime);
duration.textContent=parseInt(video1.duration);

input.value=video1.currentTime;

<video class="video1" src="../个人页面制作/1个球 - 以梦为马(片段).mp3"></video>//放一个音乐

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><style>.baner{position: relative;width: 160px;
height: 100px;
}
.time{position: absolute;}
input{position: absolute;left: 15px;
}.duration{position: absolute;right: 0px;
}
</style>
<body><video class="video1" src="../个人页面制作/1个球 - 以梦为马(片段).mp3"></video><div class="baner">
<div class="time">1</div><input type="range" min="0"  max="18">
<div class="duration">0</div>
</div><img src="../图标/xiajia.png" alt="" width="30px" height="30px" class="img1">
<button>||</button>
<script>var video1=document.querySelector('.video1');
var img=document.querySelector('.img1');
var time=document.querySelector('.time');
var time1=0;
var duration=document.querySelector('.duration');
var input=document.querySelector('input');
var button=document.querySelector('button');console.dir(time.textContent);
console.dir(video1);
console.dir(video1.currentTime);input.value=video1.duration;img.onclick=function(){video1.play();setInterval(function()
//加一个定时间，每一秒把音乐当前播放时间赋值给input的value
//如果不加：说明这个函数只执行一次：就会停留，只能把第一次的video的当前播放时间给到input的value
input.value=video1.currentTime;
time1=time1+1;         //加个缓冲time.textContent=parseInt(video1.currentTime);//音乐播放时间是浮点型，转换成整型
duration.textContent=parseInt(video1.duration);
},1000)}
button.onclick=function(){video1.pause();}</script></body>
</html>

加一个功能：
1.移动滑动条音乐就播放那里？,暂时没做出来
2.歌词:变化(还没做出来) :之后做

音乐播放器补充1video值：currentTime，duration相关推荐

vue 判断同一数组内的值是否一直_前端代码+后端API，值得一学的Vue高仿音乐播放器实战项目
项目名称:vue-fds_music 项目作者:符道胜开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...
iOS开发拓展篇—音频处理（音乐播放器6）
一.图片处理说明: Aspect表示按照原来的宽高比进行缩放. Aspectfit表示按照原来的宽高比缩放,要求看到全部图片,后果是不能完全覆盖窗口,会留有空白. Aspectfill表示按照原来的 ...
完整打造一个多功能音乐播放器项目（初步设想跟酷狗类似）
本人目前准备利用闲暇时间打造一个完整的音乐播放器项目,主要用于学习及分享!原创不易,转载请注明出处. 这是一个什么样的音乐播放器呢?整体的架构跟酷狗差不多吧,我的方式呢,是一个个组件一个个模块先做好, ...
js音乐播放器的实现以及可视化
前言我们尝试用原生js写一个音乐播放器,对音频做一个简单的可视化. 最终的效果如下图: 思路还是比较明显的,第一,我们要拿到音频的什么数据进行可视化,如何获取?第二,如何可视化,第二个问题就比较简单 ...
html 音乐切换不暂停,web-audio-api可视化音乐播放器，实现暂停切换歌曲功能，粉色系专场~...
可视化的音乐播放器,可戳我观看效果了解Web-Audio-Api 基础知识标签是HTML5的新标签,通过添加src属性实现音乐播放. AudioContext是音频播放环境,原理与canvas的绘 ...
html音乐播放器换歌,web-audio-api可视化音乐播放器，实现暂停切换歌曲功能，粉色系专场~...
可视化的音乐播放器,可戳我观看效果了解Web-Audio-Api 基础知识标签是HTML5的新标签,通过添加src属性实现音乐播放. AudioContext是音频播放环境,原理与canvas的绘 ...
原生H5+JS+CSS实现音乐播放器（上下一首，随机单曲循环播放，进度条，播放列表）
学了前端小半个月了,今天自己动手写一个音乐播放器实现的功能有播放列表 ,随机单曲循环播放,上下一首,暂停和开始,静音,音量增加减少,进度条(收藏功能暂未实现,为了排版好看添加的,后续补充收藏等功能) ...
iOS之基于FreeStreamer的简单音乐播放器(模仿QQ音乐)
代码地址如下: http://www.demodashi.com/demo/11944.html 天道酬勤前言作为一名iOS开发者,每当使用APP的时候,总难免会情不自禁的去想想,这个怎么做的?该 ...
html5模仿手机音乐播放器(添加音乐进度条和时长)
今天用html+js+cs写了一个类似手机音乐播放器的小东东,代码规范性不是很好,高手切勿喷,新手可以看看,其中歌词同步js代码参考了一个老师的代码.自己添加的是点击按钮页面滑动,和上一曲下一曲播放, ...
Android应用--简、美音乐播放器原型放送（作者：小巫）
Android应用--简.美音乐播放器原型放送 2013年7月5日简.美音乐播放器开发前言:小巫的简.美音乐播放器从5月7号开始开发,之前以为时间很充足,也没有估量整个软件的需求,如果简单实现基本的 ...

音乐播放器补充1video值：currentTime，duration

音乐播放器补充1之前做了一个

1.实现音乐播放时：进度条会动，停止时，进度条停止，进度条显示时间？

音乐播放器补充1video值：currentTime，duration相关推荐

最新文章

热门文章