• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

likev/html5-audio-player: html5 audio player(with playlist) forked from @k-ivan

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

likev/html5-audio-player

开源软件地址:

https://github.com/likev/html5-audio-player

开源编程语言:

JavaScript 64.7%

开源软件介绍:

html5-audio-player

1. introduce

html5 audio player(with playlist) using flexbox, svg, css animations and js api.

forked from @k-ivan at http://codepen.io/k-ivan/pen/pJMLmJ

demo: html5-audio-player

html5-audio-player-screenshot

2. how to use

  1. insert Google Material Icons and AudioPlayer.css before </head>
  2. insert AudioPlayer.js before </body>
  3. use AP.init function

code example:

<!DOCTYPE html>
<html >
  <head>
    <meta charset="UTF-8">
    <title>Audio player HTML5</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="css/AudioPlayer.css">
    <style>

    #player{
        position: relative;
        max-width: 700px;
        height: 500px;
        border: solid 1px gray;
    }
    </style>
  </head>

  <body>
      <!-- Audio player container-->
     <div id='player'></div>

    <!-- Audio player js begin-->
    <script src="js/AudioPlayer.js"></script>

    <script>
        // test image for web notifications
        var iconImage = null;

        AP.init({
            container:'#player',//a string containing one CSS selector
            volume   : 0.7,
            autoPlay : true,
            notification: false,
            playList: [
                {'icon': iconImage, 'title': 'Try Everything', 'file': 'mp3/try-everything.mp3'},
                {'icon': iconImage, 'title': 'Let It Go', 'file': 'mp3/let-it-go.mp3'}
          ]
        });
    </script>
    <!-- Audio player js end-->

  </body>
</html>

it will work!




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
k-ivan (Ivan) · GitHub发布时间:2022-06-18
下一篇:
posthtml/htmlnano: Modular HTML minifier, built on top of the PostHTML发布时间:2022-06-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap