音乐封面转动html,带封面的HTML5手机音频播放器

本文演示了三种不同样式的html5音频播放器，通过html5的audio标签，使其支持自定义歌名、歌手和歌词，是否自动播放，音乐封面图，播放进度等

查看演示

下载资源：

104

次下载资源

下载积分：

106

积分

引入APlayer插件

播放器html代码

1、默认样式 ap1.init();

var ap2 = new APlayer({

element: document.getElementById('player'),

narrow: true,

autoplay: false,

showlrc: false,

music: {

title: 'Preparation',

author: 'Hans Zimmer/Richard Harvey',

url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',

pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg'

}

});

2、自动播放并显示歌词 ap2.init();

var ap3 = new APlayer({

element: document.getElementById('player'),

narrow: false,

autoplay: true,

showlrc: true,

music: {

title: '平凡之路',

author: '朴树',

url: 'http://7xifn9.com1.z0.glb.clouddn.com/平凡之路.mp3',

pic: 'http://7xifn9.com1.z0.glb.clouddn.com/平凡之路.jpg'

}

});

3、只显示缩略图和播放按钮 var ap1 = new APlayer({

element: document.getElementById('player'),

narrow: false,

autoplay: false,

showlrc: false,

music: {

title: 'Preparation',

author: 'Hans Zimmer/Richard Harvey',

url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',

pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg'

}

}); 参数

描述

默认值

APlayer参数设置

element

被绑定的palyer对象

narrow

是否使用窄屏模式(只显示缩略图和播放按钮)，请看演示demo中的样式3

autoplay

是否自动播放

showlrc

是否展示歌词，请看演示demo中的样式一。

music

设置autoplay默认参数，title标题，author作者，url播放文件地址，pic播放器封面图。

音乐封面转动html,带封面的HTML5手机音频播放器相关推荐

html5 audio音频播放器
html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash 意思是当你没有给浏 ...
html5 仿微信语音播放器,Material design风格HTML5 audio音频播放器
jAudio.js是一款基于HTML5 audio的Material design风格音频播放器jQuery插件.该音频播放器可以设置音频播放列表,每首曲子的封面,标题等,还可以控制歌曲的播放和快进, ...
自定义制作音频播放器_使用HTML5制作音频播放器，第3部分：微数据和皮肤
自定义制作音频播放器 In the first two articles of this series I introduced the concept and code of a customize ...
可视化大屏原型制作 h5_使用HTML5制作音频播放器，第2部分：原型制作
可视化大屏原型制作 h5 There are two approaches to making almost anything. The first is to dive in head-first, ...
与众不同 windows phone (14) - Media（媒体）之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成...
原文:与众不同 windows phone (14) - Media(媒体)之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成 [索引页] [源码下载] 与众不同 wi ...
低仿网易云音乐音频播放器！自动获取歌曲封面，并旋转
这个是实习的时候做的了,当时看了半本第一行代码就去上班,Java 都没学过,最后实习走的时候还做了挺多东西,这个音频播放器就是其一,现在写个博客纪念一下上班两年了,虽然还是菜狗程序员! 前言实习的时 ...
带倍速音频播放器_带有播放列表HTML5音频播放器
带倍速音频播放器 HTML5 Audio player with playlist HTML5 audio player. Many of you faced with the task of cre ...
带倍速播放的播放器_带有HTML5的MP3播放器
带倍速播放的播放器 MP3 Player with HTML5 In you are a beginner in HTML5 and you are looking for new knowledge ...
php项目网页音乐播放器插件,基于HTML5 canvas和Web Audio的音频播放器插件
wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件.通过wavesurfer.js你可以使用它来制作各种HTML5音频播放器,它可以在各种支持 Web A ...

音乐封面转动html,带封面的HTML5手机音频播放器

音乐封面转动html,带封面的HTML5手机音频播放器相关推荐

最新文章

热门文章