質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Web Audio

Web Audioは、音声を処理・合成するためのWebアプリケーション向けJavaScript APIです。HTML5から導入されました。オーディオソースの選択、エフェクト・ビジュアライゼーションの追加、パンニングなど特殊効果の適用など多くの機能を持ちます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

645閲覧

bgmをキーボードに干渉せず再生させたい

monoclonal

総合スコア1

Web Audio

Web Audioは、音声を処理・合成するためのWebアプリケーション向けJavaScript APIです。HTML5から導入されました。オーディオソースの選択、エフェクト・ビジュアライゼーションの追加、パンニングなど特殊効果の適用など多くの機能を持ちます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/01/25 04:35

前提

ここに質問の内容を詳しく書いてください。
(例)
HTMLとjavascriptでBGMの鳴るブロック崩しゲームを作っています。
初めに、ブロック崩しゲームを作り、後からbgmをつけました。
そこで、解決したい点が、
ブロック崩しゲームでゲームを開始するためにスペースキー、パドルの操作で右矢印、左矢印キーを使うのですが、スペースキーを押すとbgmが再生・停止、右矢印キーでbgmの巻き戻し、左矢印キーで早送りになってしまいます。bgmには干渉せずパドルだけを操作したいのです。

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset='utf-8'> 5 <title>ブロック 崩すやつ</title> 6 <style> 7 *{ 8 margin: 0; 9 } 10 canvas{ 11 display: block; 12 margin: 20px auto; 13 border: 1px solid; 14 } 15 </style> 16 <script src="canvas.js"></script> 17 </head> 18 <body> 19 <audio controls src="music1.mp3"></audio> 20 <canvas id="canvas"></canvas> 21 </body> 22</html>

javascript

1let canvas, ctx; //canvas要素 2const width = 360, height = 640; //幅を360 高さを640 3 4let keyRight = false, keyLeft = false, keySpace = false; //キーを押してない状態をfalseにする 5 6let paddle, ball; //パドル、ボールの変数 7let blocks = []; 8 9const colors = ["red", "orange", "fuchsia", "lightgreen", "chocolate"]; 10let score = 0; 11let scene = "playing"; 12 13class Block{ //ブロッククラス 14 constructor(x, y, w, h, col, stroke){ 15 this.x = x; 16 this.y = y; //x,yで位置を指定 17 this.w = w; //幅を指定 18 this.h = h; //高さを指定 19 this.col = col; //色を指定 20 this.stroke = stroke; //枠を指定 21 } 22 draw(){ 23 drawRect(this.x, this.y, this.w, this.h, this.col, this.stroke); 24 } 25} 26 27class Paddle extends Block{ //paddleの引数をブロッククラスを継承 28 constructor(x, y){ 29 super(x, y, 70, 15, "lime", true); 30 this.x -= this.w/2; 31 this.speed = 4; //キーを押した時にパドルが動くスピード 32 } 33 34 move(){ 35 if(keyRight) this.x += this.speed; //右キーを押すとスピード分だけ右に 36 if(keyLeft) this.x -= this.speed; //左キーを押すとスピード分だけ左に 37 38 paddle.x = Math.min(Math.max(paddle.x, 0), width-paddle.w); 39 } 40} 41 42class Ball{ //ボールクラス 43 constructor(){ 44 this.r = 8; 45 this.x = paddle.x+paddle.w/2; 46 this.y = paddle.y-this.r; 47 this.col = "yellow"; 48 this.stroke = true; 49 this.onMove = false; 50 this.speed = 4; 51 this.a = 30+Math.floor(Math.random()*50); 52 this.vx = Math.cos(this.a*Math.PI/180)*this.speed; 53 this.vy = -Math.sin(this.a*Math.PI/180)*this.speed; 54 } 55 56 move(){ 57 if(!this.onMove){ //初期状態でonMoveをfalseでonMoveがfalseなら 58 this.x = paddle.x+paddle.w/2; //ボールのx座標をパドルの中心に合わせる 59 if(keySpace){ 60 this.onMove = true; 61 } 62 }else{ 63 this.x += this.vx; 64 this.y += this.vy; 65 } 66 } 67 68 draw(){ 69 drawCircle(this.x, this.y, this.r, this.col, this.stroke); 70 } 71} 72 73function drawRect(x, y, w, h, col, stroke=false){ //drawRect関数で位置、大きさ、色、枠を指定 74 ctx.fillStyle = col; //fiiStyleで塗りつぶす色の指定 75 ctx.fillRect(x, y, w, h); //fillRectで短形を描く 76 if(stroke){ //もしstrokeがtrueなら 77 ctx.strokeRect(x, y, w, h); //strokeRectで黒い枠で囲む 78 } 79} 80 81function drawCircle(x, y, r, col, stroke=false){ //位置、半径、色、枠 82 ctx.beginPath(); //パスの初期化 83 ctx.fillStyle = col; //色の指定 84 ctx.arc(x, y, r, 0, 2*Math.PI); //0~360までの円を描く 85 ctx.fill(); 86 if(stroke){ 87 ctx.stroke(); 88 } 89} 90 91function drawText(text, x, y, col, size, pos="center"){ 92 ctx.font = `boid ${size}px monospace`; 93 ctx.textBaseline = "top"; 94 if(pos == "center") ctx.textAlign = "center"; 95 if(pos == "right") ctx.textAlign = "right"; 96 ctx.fillStyle = col; 97 ctx.fillText(text, x, y); 98} 99 100function init(){ 101 canvas = document.getElementById("canvas"); //htmlのcanvas要素を取得 102 ctx = canvas.getContext("2d"); //2Dモードを取得 103 canvas.width = width; //幅を指定 104 canvas.height = height; //高さを指定 105 106 addEventListener("keydown", (e) => { 107 if(e.key == "ArrowRight") keyRight = true; 108 if(e.key == "ArrowLeft") keyLeft = true; 109 if(e.key == " ") keySpace = true; 110 }); 111 112 addEventListener("keyup", (e) => { 113 if(e.key == "ArrowRight") keyRight = false; 114 if(e.key == "ArrowLeft") keyLeft = false; 115 if(e.key == " ") keySpace = false; 116 117 }); 118 119 start(); 120 121 loop(); //121 122} 123 124function start(){ 125 score = 0; 126 paddle = new Paddle(width/2, 560); //パドルの位置を中央、高さを560に置く 127 ball = new Ball(); 128 blocks = []; 129 for(let i = 0;i < 5;i++){ 130 for(let j =0;j < 5; j++){ 131 blocks.push(new Block(35+j*60, 50+i*30, 50, 15, colors[i], true)); 132 } 133 } 134} 135 136function loop(){ 137 drawRect(0, 0, width, height, "palegreen"); //左上(0,0)を起点にcanvasの幅と高さいっぱいに"palegreen"色に塗りつぶす 138 139 if(scene == "playing"){ 140 paddle.move(); //moveメソッドを読み込む 141 ball.move(); 142 143 collision(); 144 145 if(ball.y > height+100){ 146 start(); 147 } 148 if(blocks.length == 0){ 149 scene = "clear"; 150 } 151 } 152//スコアの表示 153 blocks.forEach(block => { 154 block.draw(); 155 }); 156 paddle.draw(); 157 ball.draw(); 158 drawText("SCORE:"+("000"+score).slice(-3), width-5,5, "green", 22, "right"); 159 if(scene == "clear"){ 160 drawText("GAME CLEAR!", width/2, 200, "gold", 100); 161 } 162 163 requestAnimationFrame(loop); 164} 165 166function collision(){ 167 if(ball.x+ball.r > width || ball.x-ball.r < 0){ 168 ball.vx *= -1; 169 } 170 if(ball.y-ball.r < 0){ 171 ball.vy *= -1; 172 } 173 if(ball.y+ball.r > paddle.y && ball.y+ball.r < paddle.y+5 174 && ball.x+ball.r > paddle.x && ball.x-ball.r < paddle.x+paddle.w){ 175 let x = ball.x-(paddle.x+paddle.w/2); 176 let y = (paddle.y+paddle.h)-ball.y; 177 ball.a = Math.atan2(y,x)*180/Math.PI; 178 ball.vx = Math.cos(ball.a*Math.PI/180)*ball.speed; 179 ball.vy = -Math.sin(ball.a*Math.PI/180)*ball.speed; 180 } 181 182 blocks.forEach((block, i) =>{ 183 if(ball.y-ball.r < block.y+block.h && ball.y-ball.r > block.y+block.h-5 184 && ball.x-ball.r > block.x && ball.x-ball.r < block.x+block.w){ 185 ball.y = block.y-ball.r; 186 ball.vy *= -1; 187 blocks.splice(i, 1); 188 score += 10; //187 189 } 190 if(ball.y+ball.r > block.y && ball.y+ball.r < block.y+5 191 && ball.x+ball.r > block.x && ball.x-ball.r < block.x+block.w){ 192 ball.y = block.y-ball.r; 193 ball.vy *= -1; 194 blocks.splice(i, 1); 195 score += 10; //194 196 } 197 if(ball.x+ball.r > block.x && ball.x+ball.r < block.x+5 198 && ball.y+ball.r > block.y && ball.y-ball.r < block.y+block.h){ 199 ball.x = block.x-ball.r; 200 ball.vx *= -1; 201 blocks.splice(i, 1); 202 score += 10; 203 } 204 if(ball.x-ball.r < block.x+block.w && ball.x-ball.r > block.x+block.w-5 205 && ball.y+ball.r > block.y && ball.y-ball.r < block.y+block.h){ 206 ball.x = block.x+block.w+ball.r; 207 ball.vx *= -1; 208 blocks.splice(i, 1); 209 score += 10; 210 } 211 }); 212} 213 214onload = init;

補足情報(FW/ツールのバージョンなど)

開発環境は、OS VScodeです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

int32_t

2023/01/25 04:44

どうやって <audio> の音を開始してますか? JavaScript にはコードが見当たらないようですが。
monoclonal

2023/01/25 04:50

質問ありがとうございます。htmlの中だけで、audio要素とcontrol属性を使えば再生されると思っていたので、JavaScriptには何も書いていないです、、 やはりJavaScriptにも何かコードを書かなくてはいけないのでしょうか? 
int32_t

2023/01/25 05:01

BGMが鳴っている場合に問題が起きるという話ですよね? 現状のHTMLとJavaScriptだと何もしなければBGMはならないし、その状態でスペースキーを押してもBGMが再生したりはしないのではないですか? 画面上の<audio>の再生ボタンを押したときだけ起きる問題ではありませんか?
monoclonal

2023/01/25 05:05

補足が足りませんでした、、audioの再生ボタンを押した時にだけ起きる問題です。
guest

回答1

0

ベストアンサー

audioの再生ボタンを押した時にだけ起きる問題です。

画面上の <audio> の再生ボタンを押したあと、<audio> 以外の部分をクリックしてください。
キーボードフォーカスが <audio> に向けられているままなのでスペースキーなどで <audio> が反応します。<audio> 以外の部分をクリックすることでキーボードフォーカスが外れます。

JavaScript のコードから <audio> の再生開始をすれば、キーボードフォーカスは <audio> にならないので問題は起きなくなります。

投稿2023/01/25 05:16

int32_t

総合スコア20672

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

monoclonal

2023/01/25 05:48

audio要素のcontrolにはそんな仕様があったんですね。無事解決しました。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問