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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

764閲覧

クリックすると音のなるボタンをつくりたい2

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/08/21 10:37

前回の質問と回答してくださった方の意見リンク内容をふまえ、
リンク内容
こちらのサイトを参考にaudioタグとjQueryを使って試しにつくってみたのですが、
音をならすことができませんでした。
コードは以下のようになります

html

1<!DOCTYPE html> 2<html> 3 4<title>ホームページ</title> 5 6<head> 7 8 9<!--jQuery本体--> 10<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 11 12<!--自分で作るjQueryプログラム--> 13<script src="sample.js"></script> 14 15</head> 16<body background="img/nm001.png"> 17 18 19 20 21<!--ボタン--> 22<button type="button"><a class="sounds" data-file="morning">morning</a></button> 23 24</body> 25</html>

jQuery

1 2$(document).ready(function() { 3 //対応拡張子をチェック 4 var audio = new Audio(); 5 if(audio.canPlayType('audio/mp3')){ 6 var a_type = '.mp3'; 7 } else if(audio.canPlayType('audio/wav')){ 8 var a_type = '.wav'; 9 } 10 //audioタグを作る 11 $('.sounds').each(function(){ 12 var file = $(this).attr('data-file'); 13 $('body').append('<audio id="'+file+'" preload="auto"></audio>'); 14 $('#'+file).attr('src', './sound/'+file+a_type); 15 }); 16 クリックされた要素と同じaudioを再生する 17 $('.sounds').bind('click'function() { 18 var file = $(this).attr('data-file'); 19 $('audio').each(function(){ 20 $(this).get(0).pause(); 21 $(this).get(0).currentTime = 0; 22 }); 23 $('#'+file).get(0).play(); 24 }); 25});

参考にしたサイトから変更した点はjQueryのtouchstartをclickに、htmlの画像クリックの部分をボタンにしました。
コードに間違いがあるのでしょうか

フォルダの構造は下のような感じで

イメージ説明

soundフォルダの中にmorning.mp3とmorning.wavが入っています

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

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

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

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

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

m.ts10806

2018/08/21 12:36

「音を鳴らすことができませんでした」では何が起きているかわかりません。エラーが起きていないかブラウザ開発ツールのコンソールを確認したりして起きた現象を具体的に記載してください。またタイトルには要件を書くものですが、前と同じでは意味がありません。以前の質問より進んだのであればそれに即したタイトルにしてください。
guest

回答1

0

jquery

1 $('.sounds').bind('click'function() { // <- ここのコンマが抜けてます 2 var file = $(this).attr('data-file'); 3 $('audio').each(function(){ 4 $(this).get(0).pause(); 5 $(this).get(0).currentTime = 0; 6 }); 7 $('#'+file).get(0).play(); 8 });

投稿2018/08/22 01:41

_lemon2003_

総合スコア274

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問