Question

我想创建一个像吉他英雄这样的键盘声音游戏。我的基础是通过频率分析声音，如果频率高于或低于定义的断点，则根据频率在线路1,2或3上添加抽头块。我已经使用了analyserNode并获得了该歌曲的FreqArray，现在我想使用这些数据创建画布元素，它将跟随一条线直到玩家点击他的键盘。

// Create id function to call/create the right name for the right object
let _ = (id) => {
  return document.getElementById(id)
}

// Create new audio object and adjust some of its properties
let audio = new Audio()
let audioFolder = '../assets/sounds/'
let audioExt = '.mp3'
let audioIndex = 1
let playingtrack

let isPlaying = false
let trackbox = document.querySelector('#trackbox')
let tracks = {
  'track1': ['Yo Molly', 'track'],
  'track2': ['POPSHIT', 'track2'],
  'track3': ['Menya', 'track3'],
  'track4': ['CHUNG-LEE', 'HZ'] }

// Create playlist
let playlist = () => {
  audio.addEventListener('ended', () => {
    _(playingtrack).style.background = 'url(../assets/images/play.png)'
    playingtrack = ''
    isPlaying = false
  })
  let switchTrack = (event) => {
    if (isPlaying) {
      if (playingtrack !== event.target.id) {
        isPlaying = true
        _(playingtrack).style.background = 'url(../assets/images/play.png)'
        event.target.style.background = 'url(../assets/images/pause.png)'
        audio.src = audioFolder + event.target.id + audioExt
        audio.play()
      } else {
        audio.pause()
        isPlaying = false
        event.target.style.background = 'url(../assets/images/play.png)'
      }
    } else {
      isPlaying = true
      event.target.style.background = 'url(../assets/images/pause.png)'
      if (playingtrack !== event.target.id) {
        audio.src = audioFolder + event.target.id + audioExt
      }
      audio.play()
    }
    playingtrack = event.target.id
  }

  // Create each audio tags and tracks
  for (let track in tracks) {
    let table = document.createElement('div')
    let bt = document.createElement('button')
    let tn = document.createElement('div')
    table.className = 'trackbar'
    bt.className = 'playbutton'
    tn.className = 'trackname'
    tn.innerHTML = audioIndex + '. ' + tracks[track][0]
    bt.id = tracks[track][1]
    bt.addEventListener('click', switchTrack)
    table.appendChild(bt)
    table.appendChild(tn)
    trackbox.appendChild(table)
    audioIndex++
  }
}
audio.loop = true
audio.autoplay = false

// Establish all variables that Analyser will use
let canvas, ctx, freqArray, bars, barX, barWidth, barHeight
export let context = new (window.AudioContext || window.webktiAudioContext)() // AudioContext object instance
export let analyser = context.createAnalyser()

// Re-route audio playback into the processing graph of the AudioContext
export let source = context.createMediaElementSource(audio)
// AnalyserNode method
source.connect(analyser)
analyser.connect(context.destination)
freqArray = new Uint8Array(analyser.frequencyBinCount)

let frameLooper = () => {
  window.requestAnimationFrame(frameLooper)
  analyser.getByteFrequencyData(freqArray)
  ctx.clearRect(0, 0, canvas.width, canvas.height) // Clear the canvas
  ctx.fillStyle = '#9B59B6' // Color of the bars
  bars = 100
  for (let i = 0; i < bars; i++) {
    barX = i * 3
    barWidth = 2
    barHeight = -(freqArray[i] / 2)
    ctx.fillRect(barX, canvas.height, barWidth, barHeight)
  }
}

// Initialize the MP3 player after the page loads all of its HTML into the window
let initMp3Player = () => {
  document.getElementById('audio_box').appendChild(audio)
  canvas = document.getElementById('analyser_render')
  ctx = canvas.getContext('2d')

  frameLooper()
// frameLooper() animates any style of graphics for the audio frequency
}
window.addEventListener('load', initMp3Player)
window.addEventListener('load', playlist)

Answer 1

我不建议这样做，因为在一首歌中你总是同时拥有多个频率。只需选择一个频率范围几乎不可能编写AI。我建议你自己通过听或写乐谱来写自己的笔记。那里有片状音乐。

使用javascript web audio api创建键盘英雄

1 个答案: