html切换播放音乐时间,JS指定音频audio在某个时间点进行播放

前言：

今天接到一个需求，需要获取某个.mp3音频文件的时间长度和指定音频audio在某个时间点进行播放(比如说这个视频有4分钟，我要让它默认从第2秒的时候开始播放)，这里当然想到了H5中的audio元素，当然我们平时看这个标签上显示的音频时间格式是时:分:秒的格式的因此需要涉及到秒和时间格式的转化。因为刚开始对这块十分的陌生，最后通过查阅了网上的一些资料，最终完美的把这些功能点做好了。在这里分享一下，希望能够帮助有需要的小伙伴。

获取音频时长：

function getAudioDuration(src) {

let audio = document.createElement('audio') //生成一个audio元素

audio.src = src //音乐的路径

audio.addEventListener("canplay", function () {

console.log("音频长度=>>>：", parseInt(audio.duration) + '秒', '音频时分秒格式：', timeToMinute(parseInt(audio

.duration)));

});

}

指定音频audio在某个时间点进行播放：

指定默认从第20s开始播放效果图：

html切换播放音乐时间,JS指定音频audio在某个时间点进行播放相关推荐

php网页完成后播放音乐提醒,js+php 实现定时查询数据播放提示音乐
摘要:给客户后台设置,提现和充值时自动播放音乐,所以需要定时查询查询数据库,有数据时播放提示音乐... 给客户后台设置,提现和充值时自动播放音乐,所以需要定时查询查询数据库,有数据时播放提示音乐先在 ...
微信播放在服务器视频无法播放音乐,【bug解决】ios微信浏览器中背景音乐无法播放...
我记得之前在一次项目中,出现过浏览报错: 所以在这次H5的制作中,我使用了iframe来加载音频文件,使用这种方式后,电脑端是没有问题的,但是当上传至服务器上在手机上浏览时,会出现点击音乐旋转按钮无法 ...
js倒计时结束后播放音乐html5,js实现简单的倒计时
这篇文章主要为大家详细介绍了js实现简单的倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了js实现简单倒计时的具体代码,供大家参考,具体内容如 ...
html自动获取系统时间,js、html获取系统当前时间方法
本文主要为大家详细介绍了javascript html获取系统当前时间,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. TD { FONT-SIZE: 12px; COLOR: ...
python播放音乐同步歌词_linux 下 python 调用 mplayer 解析歌词同步播放显示
标签: 加载同目录同名歌词同步显示 #!/usr/bin/python # -*- coding: utf-8 -*- import sys, os, time, subprocess, re, ch ...
HTML网站微信打开自动播放音乐JS
源码简介: HTML网站微信打开自动播放音乐JS,众所周知网站里面的bgm在微信是不能自动播放的,好像是因为浏览器内核限制禁止自动播放,具体也不清楚,经过我的测试这个代码确实可以修复微信不自动播放音乐 ...
H5 audio 音频标签自定义样式修改以及添加播放控制事件
20181023 更新原来的代码拖动进度点只写了mouse事件,手机端的话应该是touch事件.所以出现了有朋友说的移动端无法拖动进度条的问题.现在更新的代码已经加上touch事件,即无论是手机模式 ...
全网首发，大众奥迪领驭帕萨特DIY数码碟盒增加USB和蓝牙播放音乐功能使用原车接口无损改装
文章目录全网首发!大众奥迪DIY数码碟盒增加USB和蓝牙播放音乐功能前言 1.设计指标 2.方案设计 2.1.外壳选择 2.2.蓝牙方案 2.3.MCU方案 3.原理图设计 4.PCB设计 5.程 ...
STC-B学习板蜂鸣器播放音乐
功能:单片机烧录好程序后,按key1按键播放<IF YOU>,再次按key1可暂停播放,按key2可切换歌曲到<国际歌>,再按key3可切换歌曲到<孤勇者> 芯片: ...

html切换播放音乐时间,JS指定音频audio在某个时间点进行播放

html切换播放音乐时间,JS指定音频audio在某个时间点进行播放相关推荐

最新文章

热门文章