07-06 サウンドファイルの読み込み

練習問題7-6-2

例題7-6-1 を改造し、クリックした位置に 半透明の丸 を描きなさい。

丸の色は文字と同じ (80, 160, 255) で、透明度は 100
丸の直径は 40
クリックするたびに効果音も鳴らす
背景や文字は、例題のままにしておく（消さない）

let popSound;

function preload() {
  popSound = loadSound("pop.mp3");
}

function setup() {
  createCanvas(300, 300);
  background(234, 244, 255);

  fill(80, 160, 255);
  textSize(18);
  textAlign(CENTER, CENTER);
  text("クリックで音を鳴らす", width / 2, height / 2);
}

function mousePressed() {
  noStroke()
  fill(80, 160, 255, 100)
  circle(mouseX, mouseY, 40)
  popSound.play();
}

最初は前やった配列に入れる方法をしてしまって、何個も重なったことによって、透明じゃなくなってしまったのですが、この手法は違うということに気づき、どうにかなりました。

練習問題7-6-3

06-03 で学んだ keyPressed を使い、キーによって違う効果音 を鳴らしましょう。音だけでなく、画面の色 も切り替え、押したキーを 画面中央に大きく 表示します。

let popSound;
let beepSound

function preload() {
  popSound = loadSound("pop.mp3");
  beepSound = loadSound("beep.mp3")
}

function setup() {
  createCanvas(300, 300);
  background(234, 244, 255);
}

function keyPressed() {
  noStroke()
  textSize(120)
  textAlign(CENTER, CENTER)
  if(key==="b"||key==="B"){
    background(251, 215, 210)
    fill(193, 115, 104)
    beepSound.play();
  }else{
    background(234, 244, 255)
    fill(80, 160, 255)
    popSound.play();
  }
  text(key, width/2, height/2)
}

練習問題7-6-4

ここからは BGM を使ったミュージックプレイヤーです。1曲を読み込み、スペースキーで再生と停止を切り替えなさい。

let bgm;

function preload() {
  bgm = loadSound("bgm01.mp3")
}

function setup() {
  createCanvas(300, 300);
  background(254, 245, 233);
  fill(249, 189, 88);
  drawText();
}

function keyPressed() {
  if (key === " ") {
    if (bgm.isPlaying()) {
      bgm.stop()
      fill(249, 189, 88);
      background(254, 245, 233);
    } else if(!bgm.isPlaying()) {
      bgm.play()
      fill(80, 160, 255);
      background(234, 244, 255);
    }
    drawText();
  }
}

function drawText() {
  textAlign(CENTER, CENTER);
  textSize(18);
  text("8bit01", width / 2, height / 2 - 20);
  text("スペースキーで再生／停止", width / 2, height / 2 + 20);
  textSize(12);
  text("音楽：魔王魂", width / 2, height - 20);
}

凡ミスでまた苦戦しましたが、使い方は理解しました。

練習問題7-6-5

練習問題7-6-4 を改造し、3曲を切り替えられるミュージックプレイヤーにしましょう。この問題は高難易度です。何をどうすればよいのか、今まで習ったことを駆使して作ってみてください。

let songs = []
let songIndex=0
let screen=0

function preload() {
  songs.push(loadSound("bgm01.mp3"))
  songs.push(loadSound("bgm02.mp3"))
  songs.push(loadSound("bgm03.mp3"))
}

function setup() {
  createCanvas(300, 300);
  background(254, 245, 233);
  fill(249, 189, 88);
}
function draw(){
  if(screen===0){
    background(254, 245, 233);
    fill(249, 189, 88);
  }else if(screen===1){
    fill(80, 160, 255);
    background(234, 244, 255);
  }
  drawText()
}

function keyPressed() {
  if (key === " ") {
    if (songs[songIndex].isPlaying()) {
      songs[songIndex].stop()
      screen=0
    } else if(!songs[songIndex].isPlaying()) {
      songs[songIndex].play()
      screen=1
    }
  }
  if(keyCode === LEFT_ARROW){
    for(let i=0; i<songs.length; i++){
      songs[i].stop()
    }
    songIndex = songIndex+(songs.length-1)
  }else if(keyCode === RIGHT_ARROW){
    for(let i=0; i<songs.length; i++){
      songs[i].stop()
    }
    songIndex++
  }
  songIndex=songIndex%songs.length
}

function drawText() {
  textAlign(CENTER, CENTER);
  textSize(18);
  text("8bit0"+(songIndex+1), width / 2, height / 2 - 20);
  text("スペースキーで再生／停止", width / 2, height / 2 + 20);
  text("←→で曲を変更", width/2, height/2+50)
  textSize(12);
  text("音楽：魔王魂", width / 2, height - 20);
}

ものすごく難しかったです。特に曲を変えたときに数字が動くというところで苦戦しました。
最初に直面したのは、０１のように表記されているので、最初の０をどうしたらいいかという問題でした。ですが、私ではこれは思いつかなかったので、最初から０をつけてあります。解決はちょっと無理でした。
次に直面したのは数字を変えたはいいものの、それに合わせて文字がすぐに変わらないことでした。従来のプログラムでは、スペースを押したときにだけバックグラウンドがもう一度表示されるようになっていました。なので文字だけを変えるようにしても、文字が上から重なってっしまいました。なので、思いついた策としては、矢印キーのプログラムでもバックグラウンドを表示するという方法でした。ですが、これではプログラムの量が多くなってしまうと考えたため、苦肉の策として、drawを使いました。処理を多くしたくはなかったのですが、仕方ないです。
そして最後に起こった問題は、songIndexの値は最初、左矢印キーが押された時は、減らすようにしていたのですが、それではうまくいかなかったため、ものすごく考えました。その結果思いついたのは、最初から％であまりを使っていたので、選べる曲の数から１引いた数を足せばいいのではないかという結論に至りました。
そしてそれを完成させたのが上のプログラムです。結構原型がなくなってしまったような気もしますし、曲が１０以上あると粗が出てきてしまいますが、個人的にはよくできたと思っています。

練習問題7-6-2

練習問題7-6-3

練習問題7-6-4

練習問題7-6-5

コメントする コメントをキャンセル

コメントするコメントをキャンセル