<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery鼓.com</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<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 id="boom">
<source src="sounds/boom.wav" type="audio/wav">
</audio>
<audio id="clap">
<source src="sounds/clap.wav" type="audio/wav">
</audio>
<audio id="hihat">
<source src="sounds/hihat.wav" type="audio/wav">
</audio>
<audio id="kick">
<source src="sounds/kick.wav" type="audio/wav">
</audio>
<audio id="openhat">
<source src="sounds/openhat.wav" type="audio/wav">
</audio>
<audio id="ride">
<source src="sounds/ride.wav" type="audio/wav">
</audio>
<audio id="snare">
<source src="sounds/snare.wav" type="audio/wav">
</audio>
<audio id="tink">
<source src="sounds/tink.wav" type="audio/wav">
</audio>
<audio id="tom">
<source src="sounds/tom.wav" type="audio/wav">
</audio>
<div class="key-btn key-a">A<p>CLAP</p></div>
<div class="key-btn key-s">S<p>HIHAT</p></div>
<div class="key-btn key-d">D<p>KICK</p></div>
<div class="key-btn key-f">F<p>OPENHAT</p></div>
<div class="key-btn key-g">G<p>BOOM</p></div>
<div class="key-btn key-h">H<p>RIDE</p></div>
<div class="key-btn key-j">J<p>SNARE</p></div>
<div class="key-btn key-k">K<p>TOM</p></div>
<div class="key-btn key-l">L<p>TINK</p></div>
</body>
<script>
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>
微信代码
<!--index.wxml-->
<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() }})
<!--index.wxss-->
.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;}