質問編集履歴

4

内容を詳細に記述

2020/08/24 09:53

投稿

10susumu
10susumu

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,5 +1,129 @@
1
- rails を使い効果音を追加したいと考えています。もっとも簡単な方法を知りたいです。音源のファイルはmp3でアプリ内のディレクトリから参照する方法を探しています。javascriptを活用すれば実現可能ではないかと思い調べたところ、audiojsを紹介ている記事を見まし。しかし、バージョンが古のか、説明されている操作では音出すことができませんでした。
1
+ ### 前提・実現したいこと
2
2
 
3
- 参考にした記事
3
+ Uncaught TypeError: Cannot read property 'fn' of undefined
4
4
 
5
+ を解決したい。
6
+
7
+
8
+
9
+ rails を使い効果音を追加したいと考えています。音源のファイルはmp3でアプリ内のディレクトリから参照する方法を探しています。記事を参考に、まずは簡単なものを真似しましたがエラーが出て、自力で解決ができませんでした。
10
+
11
+
12
+
13
+ ### 発生している問題・エラーメッセージ
14
+
15
+
16
+
17
+ ```js
18
+
19
+ Uncaught TypeError: Cannot read property 'fn' of undefined
20
+
21
+ at sound.js:4
22
+
23
+ at Object.<anonymous> (sound.js:13)
24
+
25
+ at Object../app/javascript/sound.js (sound.js:18)
26
+
27
+ at __webpack_require__ (bootstrap:19)
28
+
29
+ at Object../app/javascript/packs/application.js (application.js:12)
30
+
31
+ at __webpack_require__ (bootstrap:19)
32
+
33
+ at bootstrap:83
34
+
35
+ at bootstrap:83
36
+
37
+ (anonymous) @ sound.js:4
38
+
39
+ (anonymous) @ sound.js:13
40
+
41
+ ./app/javascript/sound.js @ sound.js:18
42
+
43
+ __webpack_require__ @ bootstrap:19
44
+
45
+ ./app/javascript/packs/application.js @ application.js:12
46
+
47
+ __webpack_require__ @ bootstrap:19
48
+
49
+ (anonymous) @ bootstrap:83
50
+
51
+ (anonymous) @ bootstrap:83
52
+
53
+
54
+
55
+ ```
56
+
57
+
58
+
59
+ ### 該当のソースコード
60
+
61
+
62
+
63
+ ```js
64
+
65
+ (function (window, $) {
66
+
67
+ 'use strict';
68
+
69
+
70
+
71
+ $.fn.useSound = function (_event, _id) {
72
+
73
+ var se = $(_id);
74
+
75
+ this.on(_event, function(){
76
+
77
+ se[0].currentTime = 0;
78
+
79
+ se[0].play();
80
+
81
+ });
82
+
83
+ return this;
84
+
85
+ };
86
+
87
+
88
+
89
+ })(this, this.jQuery);
90
+
91
+
92
+
93
+ $('.btn a').useSound('mousedown touchstart', '#sound');
94
+
95
+ ```
96
+
97
+
98
+
99
+ ```html
100
+
101
+ <p class="btn"><a onClick="sound()">クリック</a></p>
102
+
103
+
104
+
105
+ <audio id="sound" preload="auto">
106
+
107
+ <source src="http://idotdesign.net/wp-content/themes/idotdesign/sound/sound.mp3" type="audio/mp3">
108
+
109
+ <source src="http://idotdesign.net/wp-content/themes/idotdesign/sound/sound.wav" type="audio/wav">
110
+
111
+ </audio>
112
+
113
+ ```
114
+
115
+
116
+
117
+ ### 試したこと
118
+
119
+ Uncaught TypeError: Cannot read property 'fn' of undefined
120
+
121
+ で検索したところ、jqueryが正しく読み込まれていないとの解決方法が多かったため、同様に確認しましたが、エラーは直りませんでした。
122
+
123
+ ### 補足情報(FW/ツールのバージョンなど)
124
+
125
+ rails 6
126
+
127
+ 参考
128
+
5
- https://qiita.com/whitia/items/3e533c64ce6b6badfb63
129
+ https://idotdesign.net/blog/web/htmlcss/audio-se-btn/

3

参照追加

2020/08/24 09:53

投稿

10susumu
10susumu

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,5 @@
1
1
  rails を使い効果音を追加したいと考えています。もっとも簡単な方法を知りたいです。音源のファイルはmp3でアプリ内のディレクトリから参照する方法を探しています。javascriptを活用すれば実現可能ではないかと思い調べたところ、audiojsを紹介している記事を見ました。しかし、バージョンが古いのか、説明されている操作では音出すことができませんでした。
2
2
 
3
- 参考
3
+ 参考にした記事
4
+
5
+ https://qiita.com/whitia/items/3e533c64ce6b6badfb63

2

2020/08/21 15:40

投稿

10susumu
10susumu

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1 +1,3 @@
1
- rails を使い効果音を追加したいと考えています。もっとも簡単な方法を知りたいです。javascriptを活用すれば実現可能ではないかと思い調べたところ、audiojsを紹介している記事を見ました。しかし、バージョンが古いのか、説明されている操作では音出すことができませんでした。
1
+ rails を使い効果音を追加したいと考えています。もっとも簡単な方法を知りたいです。音源のファイルはmp3でアプリ内のディレクトリから参照する方法を探しています。javascriptを活用すれば実現可能ではないかと思い調べたところ、audiojsを紹介している記事を見ました。しかし、バージョンが古いのか、説明されている操作では音出すことができませんでした。
2
+
3
+ 参考

1

2020/08/21 15:38

投稿

10susumu
10susumu

スコア1

test CHANGED
File without changes
test CHANGED
@@ -1,49 +1 @@
1
- ### 前提・実現したいこと
2
-
3
-
4
-
5
- ここに質問の内容を詳しく書いてください。
6
-
7
- (例)PHP(CakePHP)で●●なシステムを作っています。
8
-
9
- ■■能を実装中に以下のエラメッセージが発生しました。
1
+ rails を使い効果音を追加したいと考えています。もっとも簡単方法を知りたいです。javascriptを活用すれば実現可ではないかと思い調べたところ、audiojs紹介している記事を見ました。しかし、バージョン古いのか、説明されている操作では音出すことができせんでした。
10
-
11
-
12
-
13
- ### 発生している問題・エラーメッセージ
14
-
15
-
16
-
17
- ```
18
-
19
- エラーメッセージ
20
-
21
- ```
22
-
23
-
24
-
25
- ### 該当のソースコード
26
-
27
-
28
-
29
- ```ここに言語名を入力
30
-
31
- ソースコード
32
-
33
- ```
34
-
35
-
36
-
37
- ### 試したこと
38
-
39
-
40
-
41
- ここに問題に対して試したことを記載してください。
42
-
43
-
44
-
45
- ### 補足情報(FW/ツールのバージョンなど)
46
-
47
-
48
-
49
- ここにより詳細な情報を記載してください。