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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

0回答

550閲覧

railsで効果音を出したい

10susumu

総合スコア1

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2020/08/21 15:30

編集2020/08/24 09:53

前提・実現したいこと

Uncaught TypeError: Cannot read property 'fn' of undefined
を解決したい。

rails を使い効果音を追加したいと考えています。音源のファイルはmp3でアプリ内のディレクトリから参照する方法を探しています。記事を参考に、まずは簡単なものを真似しましたがエラーが出て、自力で解決ができませんでした。

発生している問題・エラーメッセージ

js

1Uncaught TypeError: Cannot read property 'fn' of undefined 2 at sound.js:4 3 at Object.<anonymous> (sound.js:13) 4 at Object../app/javascript/sound.js (sound.js:18) 5 at __webpack_require__ (bootstrap:19) 6 at Object../app/javascript/packs/application.js (application.js:12) 7 at __webpack_require__ (bootstrap:19) 8 at bootstrap:83 9 at bootstrap:83 10(anonymous) @ sound.js:4 11(anonymous) @ sound.js:13 12./app/javascript/sound.js @ sound.js:18 13__webpack_require__ @ bootstrap:19 14./app/javascript/packs/application.js @ application.js:12 15__webpack_require__ @ bootstrap:19 16(anonymous) @ bootstrap:83 17(anonymous) @ bootstrap:83 18

該当のソースコード

js

1 (function (window, $) { 2 'use strict'; 3 4 $.fn.useSound = function (_event, _id) { 5 var se = $(_id); 6 this.on(_event, function(){ 7 se[0].currentTime = 0; 8 se[0].play(); 9 }); 10 return this; 11 }; 12 13 })(this, this.jQuery); 14 15 $('.btn a').useSound('mousedown touchstart', '#sound');

html

1<p class="btn"><a onClick="sound()">クリック</a></p> 2 3<audio id="sound" preload="auto"> 4 <source src="http://idotdesign.net/wp-content/themes/idotdesign/sound/sound.mp3" type="audio/mp3"> 5 <source src="http://idotdesign.net/wp-content/themes/idotdesign/sound/sound.wav" type="audio/wav"> 6</audio>

試したこと

Uncaught TypeError: Cannot read property 'fn' of undefined
で検索したところ、jqueryが正しく読み込まれていないとの解決方法が多かったため、同様に確認しましたが、エラーは直りませんでした。

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

rails 6
参考
https://idotdesign.net/blog/web/htmlcss/audio-se-btn/

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問