如何在网页上播放音乐,music_box.
看左上方的头像,点击可以播放音乐。
看看是怎么实现的。
1.下载一个MP3的文件,然后再引入一下的 js, css文件。
2.在html中,引入以上的 js ,css文件
3.在页面上添加一下代码:
<div class="ih-item circle effect15 left_to_right header-circle">
<a href="#">
<div class="img">
<img src="http://yuanchengblog.b0.upaiyun.com/uploads/ckeditor/pictures/5/content_2016-04-07_090123.png" alt="7 />
</div>
<div class="info">
<h3>Music box</h3>
<p class="start-misic" style="display: block;">Click to Start</p>
<p class="stop-misic" style="display: none;">Click to Stop</p>
</div>
</a>
</div>
<audio loop="loop" class="audio-tag" type="audio/mpeg" src="<%= asset_path "sound.mp3"%>" ></audio>
<a href="#">
<div class="img">
<img src="http://yuanchengblog.b0.upaiyun.com/uploads/ckeditor/pictures/5/content_2016-04-07_090123.png" alt="7 />
</div>
<div class="info">
<h3>Music box</h3>
<p class="start-misic" style="display: block;">Click to Start</p>
<p class="stop-misic" style="display: none;">Click to Stop</p>
</div>
</a>
</div>
<audio loop="loop" class="audio-tag" type="audio/mpeg" src="<%= asset_path "sound.mp3"%>" ></audio>
js, css文件的地址: 下载mp3.js文件:http://siweitech.b0.upaiyun.com//image/661/mp3.js
下载css文件: http://siweitech.b0.upaiyun.com//image/662/ihover.css