欢迎来到cool的博客
7

Music box

Click to Start

点击头像播放音乐
新博客链接

如何在网页上播放音乐,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>

js, css文件的地址:  下载mp3.js文件:http://siweitech.b0.upaiyun.com//image/661/mp3.js 

下载css文件:  http://siweitech.b0.upaiyun.com//image/662/ihover.css

返回列表