首页 > 代码库 > HTML5之audio实战，网页音乐播放器开发

HTML5之audio实战，网页音乐播放器开发

2024-07-15 14:11:11   215人阅读

今天我们就基于 HTML5 audio  来，开发一个网页音乐播放器。

在HTML5 新特性中，audio 、video 是我们比较关心的 新 元素，我们终于可以脱离 Flash ，来开发音频、视频播放器了，对于 一个HTML 新元素，无非就是 属性、事件 、方法等等，关于audio 的具体的属性、事件 、方法，请谷歌。


看我们的HTML代码： audio.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Audio</title>
        <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"bower_components/bootstrap/dist/css/bootstrap.css"/>>

Javascript 代码：audio.js
$(function() {

    // 播放器
    var Player = {
        // 歌曲路径
        path : 'res/music/',

        // 歌曲数据
        data : null,

        // 当前播放歌曲的 索引
        currentIndex : -1,

        //  播放器元素jquery对象
        $audio : $('audio'),

        // 歌曲列表
        $mList : $('#m-list'),

        //正在播放的歌曲
        $rmusic : $('#rmusic'),

        // 初始化 数据
        init : function() {

            // 数据一般来自服务器端,通过ajax 加载数据,这里是模拟
            Player.data = http://www.mamicode.com/['五月天 - Ing - 劲舞团 恋爱.mp3', '李宇春 - 下个路口见.mp3', '小可 - 嗨曲.mp3'];>

效果：



实现了 播放器常用的功能，当然可以基于CSS3 开发更 炫酷 的 界面效果，
这里主要关注，代码的实现。


联系
我们