通过html5实现简易的音乐播放器

<!DOCTYPE html>

<html>

<head>

<title>显示播放时间</title>

window.addEventListener("load",function(){

var myAudio=new Audio();

//获取所有的<li>对象

var ele=document.querySelectorAll("li");

//为每一个<li>添加点击事件

for(var i=0;i<ele.length;i++){

ele[i].addEventListener("click",function(){

myAudio.pause();

//获取我们歌曲的名字

var audioName=this.firstChild.textContent;

//判断歌曲播放格式是否支持afii格式，如果不支持换成.wav格式

if(myAudio.canPlayType("audio/aiff")!="maybe"){

//表示歌曲不能播放

audioName=audioName.replace(/\.aiff/,".wav");

}

(myAudio=new Audio(audioName)).play();

//获得该歌曲的播放时间

myAudio.addEventListener("timeupdate",function(){

//获取播放的当前时间

var ct=parseInt(myAudio.currentTime);

//获取播放歌曲的总时间

var tt=parseInt(myAudio.duration);

document.getElementByIdx_x("currentTime").innerHTML=ct+"秒";

document.getElementByIdx_x("totalTime").innerHTML=tt+"秒";

},true);

}

//为从头播放按钮添加事件

document.getElementByIdx_x("frombegin").addEventListener("click",function(){

myAudio.currentTime=0;

});

//播放事件

document.getElementByIdx_x("play").addEventListener("click",function(){

myAudio.play();

});

//暂停事件

document.getElementByIdx_x("pause").addEventListener("click",function(){

myAudio.pause();

});

},true);

</script>

</head>

<body>

<h3>html5实现简易的音乐播放器</h3>

<ul>

<li>audio/nizhan.mp3</li>

<li>audio/diyifuren.mp3</li>

<li>audio/yangcong.mp3</li>

<li>audio/first.aiff</li>

</ul>

<br>

当前播放时间:<span id="currentTime"></span>  歌曲总时间:<span id="totalTime"></span>

</body>

</html>

通过html5实现简易的音乐播放器相关推荐

HTML5+JS实现简易的音乐播放器
HTML5+JS实现简易的音乐播放器播放器实现的功能播放/暂停音乐切换歌曲,上/下一首歌音量最大或静音音乐播放时间实时变化进度条拖拽歌曲图片切换播放器效果展示代码展示 html &l ...
html音乐播放器样式,html5扁平化mp3音乐播放器样式代码
特效描述:html5 扁平化mp3 音乐播放器样式.扁平风格的简易的mp3音乐播放器样式代码.html5 mp3音乐播放器代码结构 1. 引入JS 2. HTML代码 0:00 0:00 'use ...
HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
Python：通过网络爬虫实现一个简易控制台音乐播放器
hello,大家好,我是wangzirui32,今天我们来学习如何通过网络爬虫实现一个简易控制台音乐播放器,开始学习吧! 1. 项目结构及库准备 app.py为项目入口程序,download.py为音 ...
Vue3实现简易的音乐播放器组件
前言用Vue3实现一个简易的音乐播放器组件其效果图如下所示: 实现这个组件需要提前做的准备: 引入ElementUI 引入字节跳动图标库一张唱见图片将要播放的音乐上传到文件服务器上,并提供一个 ...
使用python加PyQt5，利用QMediaPlayer写一个简易的音乐播放器（进度条拖动，音量改变，播放停止切换，歌曲列表））
当你学习了python之后,总想着利用它去做些什么,无论是制作小工具还是小游戏,都是一种锻炼. 那么,利用python加上PyQt5写一个简单的音乐播放器,可能会是一个有趣的体验. 下面我会分享一下如 ...
Android 简易的音乐播放器
Android 简易的音乐播放器效果图: 注备:由于时间问题,歌词未实现. 然后再创建一个raw的文件:如图所示然后:xml布局为: <?xml version="1.0" ...
python如何自制音乐软件_70行python代码制作一款简易的音乐播放器！
今天整理了以前的python作业代码,发现了一些有趣的小东西,比如下面这个,大概70行代码制作一款简易的音乐播放器. install some packages pip install pygame ...
Android制作简易的音乐播放器和视频播放器
文章目录制作简易的音乐播放器和视频播放器播放多媒体文件播放音频 MediaPlayer的工作流程项目示例播放视频项目示例制作简易的音乐播放器和视频播放器播放多媒体文件 Android在 ...

通过html5实现简易的音乐播放器

通过html5实现简易的音乐播放器相关推荐

最新文章

热门文章