位置:首页 > 软件操作教程 > 编程开发 > HTML > 问题详情

HTML5 设计MP3播放器

提问人:刘团圆发布时间:2020-11-23

■实例说明

本例设计一个网页音乐播放器,浏览效果如图3.7所示。设计原理:获取要播放的文件路径,然后把它传递给audio元素的src属性,再调用HTML5多媒体API中相关属性、方法或事件,根据各种逻辑设计来控制播放、暂停和停止状态。

■设计过程

第1步,新建HTML5文档,设计播放器页面结构。网页音乐播放器的主体结构为上、中、下结构,顶部分布了多个播放按钮,中部为音乐列表,底部为播放模式切换按钮。

<div id="player">

    <audio id="musicbox"x/audio>

    <div id="controls" class="clearfix controls')

        <div id="play" class="playing"x/div>

        <div id="next"x/div>

        <div id="progress">

            <div></div>

            <p id="time">00:00/00:00</p>

        </div>

        <div id=,,volumeMxdiv></div></div>

     </div>

     <div class="bar">

          <button>重置列表</button>

          <button>随机打乱</加七七011>

          <but ton〉清空列表〈/button〉

     </div>

     <ul id=nmusiclist"></ul>

     <div class="bar bottom"><span>播放模式:</span><span id="moden">全部</span> </div> </div>

第2步,在界面中插入一t<audio id=nmusicboxn>标签,在main.css样式表中隐藏音频控件。 

     audio {display: none;}

第3步,在脚本文件player,js中,设计当单击播放按钮时,让<audio id="musicbox">播放指定的音频文件。

     function playMusic(index) {

        playingFile = musicFiles[index];

        $media.attr(nsrcn, playingFile.url);

        $media[0].play();

        $("#musiclist>li").removeClass("isplay").eq(index).addClass("isplay"); 

        auto ();

        }

有关详细样式代码和操控脚本,请参考本节示例源码,限于篇幅本节操作步骤仅抛砖引玉。

继续查找其他问题的答案?

相关视频回答
回复(0)

特邀嘉宾

软件开发工程师——刘团圆

软件开发专业科班出身,擅长软件开发课程培训。

向TA咨询

该嘉宾的QQ群

更多>>
    返回顶部
    国产电影_2020最新好看的内地国产电影推荐_国产电影排行榜