| HTML5 | 您所在的位置：网站首页 › aplayer导入歌词 › HTML5 |
|
HTML5 —— APlayer 音乐播放器
Table of Contents
1. 功能简介
2. 使用示例
3. 官方说明
3.1. 使用
3.1.1. HTML
3.1.2. API
3.1.3. LRC 歌词
3.1.4. playlist
4. TODO 进一步优化事项
4.1. TODO css 显示风格设置
4.2. TODO 歌词设置
4.3. TODO 界面大小
5. A Example ：Phil Collins —— Tarzan Soundtrack
今天算是第一次自己动手折腾关于 HTML5 的东西吧，尽管从前可能不知不觉与 HTML5 有过邂逅，当知名具姓揭开面纱之后，还真惊艳。呵呵，夸张了，对于一个小菜来说，感觉到一些便捷，才算不是言过其实。 最初的要求，不高也不算低： 显示歌词，曲目列表，进度于音量调节，启、停播放控制 ，如此而已。上网搜了一下，APayer 基本满足要求。开始试用! 1 功能简介APlayer 是一个 HTML5 音频播放器，它将 audio 标签封装，结合 CSS 可制作出漂亮的播放器 UI。它支持设置歌名、歌手和歌词，可以设置是否自动播放，支持缩略图，支持播放进度以及设置播放源。 2 使用示例 首先在头部加载播放器样式文件。 在body中加入播放器 div，由于有多个播放模式，这里使用容器 container 封装5个 player。 注意：这里的播放器3，内嵌了一个属性： ... ，嵌入了一首歌词。 APlayer 音乐播放器 —— 支持歌词显示和曲目列表 player1：正常模式 player2：精简模式 player3：带 lyrics 歌词模式 [ti:You ll be in my heart] [ar:Phil Collins] [al:《人猿泰山》主题歌] [by:菲尔 柯林斯] [00:00.00] [00:03.00] [00:11.00]Come, stop your crying, it will be all right [00:15.00]Just take my hand, hold it tight [00:20.00]I will protect you from, all around you [00:25.00][00:45.00]I will be here, don t you cry [00:30.00]For one so small, you seem so strong [00:35.00]My arms will hold you, keep you safe and warm [00:40.00]This bond between us, can t be broken [00:50.00]CAUSE you ll be in my heart [00:54.00]Yes, you ll be in my heart [00:59.00]From this day on [01:01.00] now and forever more [01:10.00]You ll be in my heart [01:14.00][03:16.00]No matter what they say [01:19.00]You ll be here in my heart [01:24.00] always [01:32.00]Why can t they understand the way we feel? [01:37.00]They just don t trust, what they can t explain [01:42.00]I know we re different but, deep inside us [01:47.00]We re not that different at all [01:51.00]And you ll be in my heart [01:56.00]Yes, you ll be in my heart [02:01.00]From this day on, [02:04.00][03:04.00] now and forever more [02:11.00]Don t listen to them [02:14.00] cause what do they know? [02:17.00]We need each other, to have to hold [02:21.00][02:41.00]They ll see in time [02:25.00] I know [02:31.00]When destiny calls you, you must be strong [02:36.00]I may not be with you, but you ve got to hold on [02:45.00] I know [02:48.00] we ll show them together [02:51.00] Cause you ll be in my heart [02:55.00]Believe me, you ll be in my heart [03:00.00]I be there From this day on [03:11.00]Oh ,You ll be in my heart (You ll be here in my heart) [03:20.00] I ll be with you be here in my heart( I ll be there always ) [03:31.00]Always [03:35.00] I ll be with you [03:41.00]I ll be there for you, always [03:44.00]Always and always [03:50.00] Just look over your shoulder [03:55.00][04:00.00]Just look over your shoulder [04:04.00] I ll be there, always player4：带曲目表模式 player5：带曲目表与 lyrics 歌词模式3） 定制的播放器 载入基础播放器脚本文件 MyPlayer.js 定制播放器属性参数 首先new一个对象，绑定播放器元素，设置各种选项，最后使用ap.init();载入播放器。注意:APlayer不依赖诸如jQuery或Zepto等第三方JS库，它直接将html5中的audio标签封装起来， 所以开发者只需简单几句代码就可在页面上呈现漂亮的音乐播放器了。 选项说明: element：绑定的播放器元素。 narrow：是否使用窄屏模式，即只显示缩略图和播放按钮，请看演示demo中的样式3。 autoplay：是否自动播放，注意这个在移动端手机上不支持自动播放的。 showlrc：是否展示歌词，请看演示demo中的样式1。 music：用来设置播放音乐相关信息的集合，其中title表示音乐标题，author表示音乐的作者，url表示播放文件地址，pic当然就是播放的音乐缩略图。APlayer还提供了播放器事件，如载入播放器：ap.init()；播放：ap.play()和暂停：ap.pause()。 必须注意： 属性变量赋值，使用了‘’引用，因此注意输入的字符串中，不能含有‘，或者事先进行转义。 var ap1 = new APlayer({ element: document.getElementById('player1'), narrow: false, autoplay: true, showlrc: false, mutex: true, theme: '#e6d0b2', preload: 'metadata', music: { title: 'Tarzan: You ll Be in My Heart', author: 'Phil Collins & Mark Mancina', url: './media/PhilCollins/You ll Be in My Heart.mp3', pic: 'https://c2.staticflickr.com/8/7059/27146490673_eaec6f2e88_n.jpg' } }); ap1.init(); var ap2 = new APlayer({ element: document.getElementById('player2'), narrow: true, autoplay: false, showlrc: false, mutex: true, theme: '#e6d0b2', music: { title: 'Tarzan: Two Worlds (reprise', author: 'Phil Collins & Mark Mancina', url: './media/PhilCollins/Two Worlds (reprise.mp3', pic: 'https://c4.staticflickr.com/8/7240/27146490363_4a4e7a077c_q.jpg' } }); ap2.init(); var ap3 = new APlayer({ element: document.getElementById('player3'), narrow: false, autoplay: false, showlrc: true, mutex: true, theme: '#615754', music: { title: 'Tarzan: You ll Be in My Heart(Phil version', author: 'Phil Collins & Mark Mancina', url: './media/PhilCollins/You ll Be in My Heart(Phil version.mp3', pic: 'https://c4.staticflickr.com/8/7240/27146490363_4a4e7a077c_q.jpg' } }); ap3.init(); var ap4 = new APlayer({ element: document.getElementById('player4'), narrow: false, autoplay: false, showlrc: false, mutex: true, theme: '#ad7a86', music: [ { title: 'Tarzan: You ll Be in My Heart', author: 'Phil Collins & Mark Mancina', url: './media/PhilCollins/You ll Be in My Heart.mp3', pic: 'https://c4.staticflickr.com/8/7436/27146494083_a39d9091ea_q.jpg' }, { title: 'Tarzan: You ll Be in My Heart(Phil version', author: 'Phil Collins & Mark Mancina', url: './media/PhilCollins/You ll Be in My Heart(Phil version.mp3', pic: 'https://c4.staticflickr.com/8/7240/27146490363_4a4e7a077c_q.jpg' }, { title: 'Tarzan: Two Worlds (reprise', author: 'Phil Collins & Mark Mancina', url: './media/PhilCollins/Two Worlds (reprise.mp3', pic: 'https://c8.staticflickr.com/8/7404/27757481495_70b7e1de57_m.jpg' }, { title: 'Tarzan: Trashin the Camp(Phil version', author: 'Phil Collins & Mark Mancina', url: './media/PhilCollins/Trashin the Camp(Phil version.mp3', pic: 'https://c5.staticflickr.com/8/7375/27145298764_84a566660e_n.jpg' } ] }); ap4.init(); 3 官方说明 3.1 使用 3.1.1 HTML JS var ap = new APlayer(option); ap.init(); 选项 var option = { element: document.getElementById('player1'), // Optional, player element narrow: false, // Optional, narrow style autoplay: true, // Optional, autoplay song(s), not supported by mobile browsers showlrc: 0, // Optional, show lrc, can be 0, 1, 2, see: ###With lrc mutex: true, // Optional, pause other players when this player playing theme: '#e6d0b2', // Optional, theme color, default: #b7daff loop: true, // Optional, loop play music, default: true preload: 'metadata', // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'metadata' in Desktop, 'none' in mobile music: { // Required, music info, see: ###With playlist title: 'Preparation', // Required, music title author: 'Hans Zimmer/Richard Harvey', // Required, music author url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3', // Required, music url pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg' // Optional, music picture lrc: '[00:00.00]lrc here\n[00:01.00]aplayer' // Optional, lrc, see: ###With lrc } } 3.1.2 API ap.init() ap.play() ap.pause() 绑定事件ap.on(event, handler) event: play: Triggered when APlayer start play pause: Triggered when APlayer paused canplay: Triggered when enough data is available that APlayer can be played playing: Triggered periodically when APlayer is playing ended: Triggered when APlayer ended error: Triggered when an error occurs 3.1.3 LRC 歌词歌词可以嵌入 HTML 中，也可以嵌入 JS 中。支持多个时间标签，三种十进制秒。 [mm:ss.xx]lyric [mm:ss.xxx]lyric [mm:ss.xx][mm:ss.xx][mm:ss.xx]lyric JS 中的 LRC 格式： { showlrc: 1, music: { lrc: '[00:00.00]lrc here\n[00:01.00]aplayer' // lrc here, separate lines with \n } } HTML 中的 LRC 格式 JS: { showlrc: 2 } HTML: [00:00.00]平凡之路 - 朴树 [00:04.01]作词：韩寒 朴树 [00:08.02]作曲：朴树 编曲：朴树 [00:12.02]徘徊着的 在路上的 [00:17.37]你要走吗 [00:23.20]易碎的 骄傲着 3.1.4 playlist JS: Option: music: [ { title: '', author: '', url: '', pic: '' }, { title: '', author: '', url: '', pic: '' }, ... ] 4 TODO 进一步优化事项 4.1 TODO css 显示风格设置 4.2 TODO 歌词设置 4.3 TODO 界面大小 5 A Example ：Phil Collins —— Tarzan Soundtrack APlayer 音乐播放器 —— 支持歌词显示和曲目列表 player1：正常模式 player2：精简模式 player3：带 lyrics 歌词模式 [ti:You ll be in my heart] [ar:Phil Collins] [al:《人猿泰山》主题歌] [by:菲尔 柯林斯] [00:00.00] > [00:03.00] > [00:11.00]Come, stop your crying, it will be all right [00:15.00]Just take my hand, hold it tight [00:20.00]I will protect you from, all around you [00:25.00][00:45.00]I will be here, don t you cry [00:30.00]For one so small, you seem so strong [00:35.00]My arms will hold you, keep you safe and warm [00:40.00]This bond between us, can t be broken [00:50.00]CAUSE you ll be in my heart [00:54.00]Yes, you ll be in my heart [00:59.00]From this day on [01:01.00] now and forever more [01:10.00]You ll be in my heart [01:14.00][03:16.00]No matter what they say [01:19.00]You ll be here in my heart [01:24.00] always [01:32.00]Why can t they understand the way we feel? [01:37.00]They just don t trust, what they can t explain [01:42.00]I know we re different but, deep inside us [01:47.00]We re not that different at all [01:51.00]And you ll be in my heart [01:56.00]Yes, you ll be in my heart [02:01.00]From this day on, [02:04.00][03:04.00] now and forever more [02:11.00]Don t listen to them [02:14.00] cause what do they know? [02:17.00]We need each other, to have to hold [02:21.00][02:41.00]They ll see in time [02:25.00] I know [02:31.00]When destiny calls you, you must be strong [02:36.00]I may not be with you, but you ve got to hold on [02:45.00] I know [02:48.00] we ll show them together [02:51.00] Cause you ll be in my heart [02:55.00]Believe me, you ll be in my heart [03:00.00]I be there From this day on [03:11.00]Oh ,You ll be in my heart (You ll be here in my heart) [03:20.00] I ll be with you be here in my heart( I ll be there always ) [03:31.00]Always [03:35.00] I ll be with you [03:41.00]I ll be there for you, always [03:44.00]Always and always [03:50.00] Just look over your shoulder [03:55.00][04:00.00]Just look over your shoulder [04:04.00] I ll be there, always player4：带曲目表模式 player5：带曲目表与 lyrics 歌词模式 |
| CopyRight 2018-2019 实验室设备网 版权所有 |