【微信小程序】快进来弹钢琴啦~钢琴小程序源码分享

效果展示

今天给大家分享一个微信小程序案例——钢琴小程序。学会了以后，自己也能弹奏出优美的曲子了。程序中一共有四首曲子《茉莉花》、《小星星》、《两只老虎》、《上学歌》。

小星星

先听一听我弹奏的小星星吧，文章末尾有个投票，可以投一下票哦～

https://live.csdn.net/v/206209

钢琴音符放在我主页的资源里了，大家可以自主下载。

代码展示

现在我们开始写代码了，我用的是微信开发者工具，需要大家自己下载注册哟~

piano.js代码

// pages/piano/piano.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    keys: [
      {
        num: 1,
        name: "C3"
      },
      {
        num: 2,
        name: "D3"
      },
      {
        num: 3,
        name: "E3"
      },
      {
        num: 4,
        name: "F3"
      },
      {
        num: 5,
        name: "G3"
      },
      {
        num: 6,
        name: "A3"
      },
      {
        num: 7,
        name: "B3"
      },
      {
        num: 1,
        name: "C4"
      },
      {
        num: 2,
        name: "D4"
      },
      {
        num: 3,
        name: "E4"
      },
      {
        num: 4,
        name: "F4"
      },
      {
        num: 5,
        name: "G4"
      },
      {
        num: 6,
        name: "A4"
      },
      {
        num: 7,
        name: "B4"
      },
      {
        num: 1,
        name: "C5"
      },
      {
        num: 2,
        name: "D5"
      },
      {
        num: 3,
        name: "E5"
      },
      {
        num: 4,
        name: "F5"
      },
      {
        num: 5,
        name: "G5"
      },
      {
        num: 6,
        name: "A5"
      },
      {
        num: 7,
        name: "B5"
      },
    ]
  },
  play(e){
   var ac= wx.createInnerAudioContext();
   ac.src=`/music/${e.currentTarget.dataset.name}.mp3`;
   ac.play();
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

piano.json代码

{
  "usingComponents": {},
  "pageOrientation":"landscape",
  "navigationBarBackgroundColor": "#000"
}

piano.wxml代码

<!--pages/piano/piano.wxml-->
<swiper>
  <swiper-item>
    <view class="lrc">
      <view>茉莉花</view>
      <view>3 3 5 6 1 1 6 5 5 6 5</view>
      <view>3 3 5 6 1 1 6 5 5 6 5</view>
      <view>5 5 5 3 5 6 6 5</view>
      <view>3 2 3 5 3 2 1 1 2 1</view>
    </view>
  </swiper-item>
  <swiper-item>
    <view class="lrc">
      <view>小星星</view>
      <view>1 1 5 5 6 6 5 </view>
      <view>4 4 3 3 2 2 1 </view>
      <view> 5 5 4 4 3 3 2 </view>
      <view> 6 6 5 4 4 3 3 2 2 1</view>
    </view>
  </swiper-item>
  <swiper-item>
    <view class="lrc">
      <view>两只老虎</view>
      <view>1 2 3 1 1 2 3 1 3 4 5</view>
      <view>3 4 5 5 6 5 4 3 1</view>
      <view>5 6 5 4 3 1 2 5 1</view>
      <view>2 5 1 2 5 1 2 5 1</view>
    </view>
  </swiper-item>
  <swiper-item>
    <view class="lrc">
      <view>上学歌</view>
      <view>1 2 3 1 5</view>
      <view>6 6 1 6 5</view>
      <view>6 6 1 5 6 3</view>
      <view>6 5 3 5 3 1 2 3 1</view>
    </view>
  </swiper-item>
</swiper>

<view class="box">
  <view class="bar" hover-class="active" bindtap="play" wx:for="{{keys}}" data-name="{{item.name}}">
    <view class="name">{{item.name}}</view>
    <view class="num">{{item.num}}</view>
  </view>
</view>

piano.wxss代码

/* pages/piano/piano.wxss */
page {
  background-color: black;
}

.box {
  width: 100%;
  height: 160rpx;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-around;
}

.bar {
  height: 160rpx;
  background-color: #fff;
  border-radius: 0 0 15rpx 15rpx;
  box-shadow: 0 0 5px #000;
  margin: 1 5rpx;
  flex-grow: 1;
}

.name {
  width: 25rpx;
  height: 20rpx;
  background-color: cadetblue;
  text-align: center;
  line-height: 20rpx;
  margin: 20px auto;
}

.num {
  width: 20rpx;
  height: 20rpx;
  background-color: darkorange;
  text-align: center;
  line-height: 20rpx;
  margin: 60rpx auto 0;
}
.lrc{
  width: 100%;
  height: auto;
  text-align: center;
  line-height: 25rpx;
  color: #fff;
}
.active{
  box-shadow: none;
  background-color: #eee;
}

茉莉花

https://live.csdn.net/v/206208

写在最后

希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~
原创不易，期待你的关注与支持~
点赞❤+收藏❤+评论❤
之后我会继续更新前端学习小知识，关注我不迷路~