前端JS特效第13波：html5带音频波纹的可视化音乐播放器代码

最新推荐文章于 2024-07-04 11:30:00 发布

强迫老板HelloWord

最新推荐文章于 2024-07-04 11:30:00 发布

阅读量169

点赞数 1

文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/wangtianming88/article/details/139904606

版权

html5带音频波纹的可视化音乐播放器代码，有一个波纹的效果，在个人网站中，放一个音乐看起来效果也是很不错的哦，一般网页游戏个人网站会用到这样的特效，先来看看效果：

部分核心的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>wavesurfer.js | Playlist</title>

<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">

<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/ribbon.css" />

<!-- wavesurfer.js -->
<script src="js/wavesurfer.min.js"></script>

<!-- App -->
<script src="js/app.js"></script>
</head>

<body>
        <div class="container">
            <div class="header">
                <ul class="nav nav-pills pull-right">
                    <li><a href="/"><i class="glyphicon glyphicon-home"></i></a></li>
                </ul>

                <h1 itemprop="name">Demo</h1>
            </div>

            <div id="demo">
                <div class="row" style="margin: 30px 0">
                    <div class="col-sm-10">
                        <div id="waveform">
                            <!-- Here be waveform -->
                        </div>
                    </div>

                    <div class="col-sm-2">
                        <button class="btn btn-success btn-block" id="playPause">
                            <span id="play">
                                <i class="glyphicon glyphicon-play"></i>
                                Play
                            </span>

                            <span id="pause" style="display: none">
                                <i class="glyphicon glyphicon-pause"></i>
                                Pause
                            </span>
                        </button>
                    </div>
                </div>

                <div class="list-group" id="playlist">
                    <a href="media.mp3" class="list-group-item">
                        <i class="glyphicon glyphicon-play"></i>
                        Wake
                        <span class="badge">4:35</span>
                    </a>


                </div>
            </div>

            
        </div>

        

        
</body>
</html>

全部代码：html5带音频波纹的可视化音乐播放器代码