让网站声色俱佳—添加背景音乐

写在前面

之前搭建网站时,做过一个landingpage, 加入了背景音乐,觉得还挺有意思的,记录下操作步骤,以备不时之需。

正文

效果图:

通过点击按钮来控制音乐的播放。

怎么做?

三部曲,html,css, js.

以首页为welcome的index.html.erb为例,简单说明。

  • step1、在首页index.html.erb中,添加如下代码:
  <a id="btn-music" class="btn-music"></a>
  <audio class="music" src="XXX.mp3" autoplay controls loop hidden>
  </audio>

其中,src部分根据个人情况进行修改,如果音乐文件存在本地的public下,直接引用文件名,如果是网路上,直接引用网址,类似这样:
src="https://res.cloudinary.com/dfbew47j6/video/upload/v1496754060/lighthouse_s31qoc.m4a"

  • step2、在你的welcome.scss或者application.scss中添加以下代码:
.btn-music {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 3rem;
  height: 3rem;
  margin-left: 20px;
  background: url('https://res.cloudinary.com/elliepooh/image/upload/v1491889929/music_s7aiet.svg') center center / 100% no-repeat;
  cursor: pointer;
}

.music-off {
  background: url('https://res.cloudinary.com/elliepooh/image/upload/v1491890054/music-off_nrnsni.svg') center center / 90% no-repeat;
}
  • step3、在首页index.html.erb最下方,加入如下代码:
    <script type="text/javascript">
    let playMusic = true;
    document.getElementById("btn-music").addEventListener("click", function() {
    playMusic = !playMusic;
    document.getElementById("btn-music").classList.toggle('music-off');
    playMusic ? document.querySelector('.music').play() : document.querySelector('.music').pause();
    });
    worldMusic.volume = 0.8;//预设音量
    </script>
    

搞定,可以愉快地听歌啦!!

The End

参考资料:

lighthouse
CSS中id与class共存