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

之前搭建网站时，做过一个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共存