jq挑战30天——模拟电子鼓+小程序

最新推荐文章于 2024-10-08 13:51:35 发布

weixin_33971130

最新推荐文章于 2024-10-08 13:51:35 发布

阅读量98

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zcp2017/p/7289390.html

版权

<!doctype html>

<html>

<head>

<title>jQuery鼓.com</title>

<style>

</style>

</head>

<body>

<style>

.key-btn{border: 1px solid #f00;width: 100px;height: 80px;border-radius: 3px; text-align: center; float: left;margin:0 15px;padding-top:20px;}

</style>

</audio>

</audio>

</audio>

</audio>

</audio>

</audio>

</audio>

</audio>

</audio>

<div class="key-btn key-s">S<p>HIHAT</p></div>

<div class="key-btn key-f">F<p>OPENHAT</p></div>

<div class="key-btn key-j">J<p>SNARE</p></div>

</body>

var BOOM = document.getElementById("boom");

var CLAP = document.getElementById("clap");

var HIHAT = document.getElementById("hihat");

var KICK = document.getElementById("kick");

var OPENHAT = document.getElementById("openhat");

var RIDE = document.getElementById("ride");

var SNARE = document.getElementById("snare");

var TINK = document.getElementById("tink");

var TOM = document.getElementById("tom");

// play(); dom对象 jq不支持，js支持

function playAudio(e)

{

e.play();

}

document.οnkeydοwn=function(event){

if(event.key == 'a'){

playAudio(CLAP);

} else if(event.key == 's'){

playAudio(HIHAT);

} else if(event.key == 'd'){

playAudio(KICK);

} else if(event.key == 'f'){

playAudio(OPENHAT);

} else if(event.key == 'g'){

playAudio(BOOM);

} else if(event.key == 'h'){

playAudio(RIDE);

} else if(event.key == 'j'){

playAudio(SNARE);

} else if(event.key == 'k'){

playAudio(TOM);

} else if(event.key == 'l'){

playAudio(TINK);

}

</script>

</html>

微信代码

<view class="container">
<audio src="{{src}}" id="CLAP"></audio>
<audio src="{{src1}}" id="HIHAT"></audio>
<audio src="{{src2}}" id="KICK"></audio>
<audio src="{{src3}}" id="OPENHAT"></audio>
<audio src="{{src4}}" id="BOOM"></audio>
<audio src="{{src5}}" id="RIDE"></audio>
<audio src="{{src6}}" id="SNARE"></audio>
<audio src="{{src7}}" id="TOM"></audio>
<audio src="{{src8}}" id="TINK"></audio>
<view class="key-btn key-a" bindtap="audioPlay">A-CLAP</view>
<view class="key-btn key-s" bindtap="audioPlay1">S-HIHAT</view>
<view class="key-btn key-d" bindtap="audioPlay2">D-KICK</view>
<view class="key-btn key-f" bindtap="audioPlay3">F-OPENHAT</view>
<view class="key-btn key-g" bindtap="audioPlay4">G-BOOM</view>
<view class="key-btn key-h" bindtap="audioPlay5">H-RIDE</view>
<view class="key-btn key-j" bindtap="audioPlay6">J-SNARE</view>
<view class="key-btn key-k" bindtap="audioPlay7">K-TOM</view>
<view class="key-btn key-l" bindtap="audioPlay8">L-TINK</view>
</view>

<!--index.js->
//获取应用实例
var app = getApp()
Page({
onReady: function (e) {
// 使用 wx.createAudioContext 获取 audio 上下文 context
this.audioCtx = wx.createAudioContext('CLAP')
this.audioCtx1 = wx.createAudioContext('HIHAT')
this.audioCtx2 = wx.createAudioContext('KICK')
this.audioCtx3 = wx.createAudioContext('OPENHAT')
this.audioCtx4 = wx.createAudioContext('BOOM')
this.audioCtx5 = wx.createAudioContext('RIDE')
this.audioCtx6 = wx.createAudioContext('SNARE')
this.audioCtx7 = wx.createAudioContext('TOM')
this.audioCtx8 = wx.createAudioContext('TINK')
},
data: {
src:'http://application.buzhi.com/Public/common/music/clap.mp3',
src1: 'http://application.buzhi.com/Public/common/music/hihat.mp3',
src2: 'http://application.buzhi.com/Public/common/music/kick.mp3',
src3: 'http://application.buzhi.com/Public/common/music/openhat.mp3',
src4: 'http://application.buzhi.com/Public/common/music/boom.mp3',
src5: 'http://application.buzhi.com/Public/common/music/ride.mp3',
src6: 'http://application.buzhi.com/Public/common/music/snare.mp3',
src7: 'http://application.buzhi.com/Public/common/music/tom.mp3',
src8: 'http://application.buzhi.com/Public/common/music/tink.mp3'
},
audioPlay: function () {
this.audioCtx.play()
},
audioPlay1: function () {
this.audioCtx1.play()
},
audioPlay2: function () {
this.audioCtx2.play()
},
audioPlay3: function () {
this.audioCtx3.play()
},
audioPlay4: function () {
this.audioCtx4.play()
},
audioPlay5: function () {
this.audioCtx5.play()
},
audioPlay6: function () {
this.audioCtx6.play()
},
audioPlay7: function () {
this.audioCtx7.play()
},
audioPlay8: function () {
this.audioCtx8.play()
}
})

.container{display: flex; flex-wrap: wrap;width: 100%;padding: 60px 0 0 4px;}

.key-btn{font-size:14px;border:1px solid #20967c;color:#fff;font-weight:bold;width: 30%; text-align: center;line-height: 50px;margin: 25rpx 8rpx; border-radius: 5px;height: 50px; background: #00b388;
box-shadow:0px 3px 3px #03c797 inset; text-shadow:0px 0px 3px #13725b;}
.key-btn:active {background:#00815f;box-shadow:0px 3px 3px #17af87 inset;}

转载于:https://www.cnblogs.com/zcp2017/p/7289390.html