获取Audio音乐的总时长

html页面引入js文件:jquery.jplayer.min.js

js代码:

var time = audio.duration;
var total_time = $.jPlayer.convertTime(time);
// 如果获取到了歌曲总时间,则显示,否则显示加载中...
if(time >0){
    $("#totaltime").html(total_time);
}else{
    $("#totaltime").html("加载中...");
}

其他方法:https://blog.csdn.net/qq_42894622/article/details/89421262

let musicDom = document.getElementsByTagName('audio')[0];  // 获取AudioDom节点
musicDom.load();//因为source标签不能直接更改路径,所以整个audio标签必须重新加载一次
musicDom.oncanplay = function () {
	console.log("音乐时长",musicDom.duration);//音乐总时长
	//处理时长
	var time = musicDom.duration;
	//分钟
	var minute = time / 60;
	var minutes = parseInt(minute);
	if (minutes < 10) {
		minutes = "0" + minutes;
	}
	//秒
	var second = time % 60;
	var seconds = Math.round(second);
	if (seconds < 10) {
		seconds = "0" + seconds;
	}
	console.log('处理音乐时长',minutes+":"+seconds);	
}

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在HTML和JavaScript中获取本地音乐,可以使用HTML5新功能中的文件API。下面是一个简单的示例代码,展示了如何通过文件选择器上传本地音乐文件并获取其信息: ```html <!DOCTYPE html> <html> <head> <title>获取本地音乐</title> </head> <body> <input type="file" id="musicFile" accept="audio/*" /> <div id="musicInfo"></div> <script> document.getElementById('musicFile').addEventListener('change', (event) => { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e) => { const audio = new Audio(); audio.src = e.target.result; const musicInfo = document.getElementById('musicInfo'); musicInfo.innerHTML = ` <p>音乐文件名: ${file.name}</p> <p>音乐类型: ${file.type}</p> <p>音乐: ${audio.duration.toFixed(2)}秒</p> `; }; reader.readAsDataURL(file); } }); </script> </body> </html> ``` 在上述代码中,我们创建了一个包含文件选择器和用于显示音乐信息的`<div>`元素。当用户选择一个音乐文件后,通过`change`事件监听器获取到该文件,并使用`FileReader`对象读取文件内容。读取完成后,我们创建了一个新的`Audio`对象,将音乐文件的数据作为其`src`属性,并通过`duration`属性获取音乐。最后,我们将音乐文件的信息显示在页面上。 需要注意的是,在某些浏览器上,为了保证能够读取本地文件,需要在服务器环境下运行该代码。此外,由于每个浏览器支持的文件类型可能不同,可以使用`accept`属性来限制文件选择器只显示音频文件(`audio/*`)。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值