teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問audiojs オリジナルボタンをタップで音楽を再生する方法

編集履歴

質問編集履歴

2

内容改善

2019/04/17 10:27

投稿

StanS.
StanS.

スコア25

test CHANGED
File without changes
test CHANGED
@@ -1,12 +1,16 @@
1
1
  Webページにaudiojs を埋め込みました。
2
2
 
3
- audiojsソース元は、http://kolber.github.io/audiojs/　です。
3
+ audiojsソース元は、http://kolber.github.io/audiojs/　になります。
4
-
5
-
6
-
4
+
5
+
6
+
7
- 仮のボタンの画像を使って
7
+ 仮のボタンの画像ファイル、button.jpgを使ってボタンを押すと、
8
-
8
+
9
- ボタンを押すと、「再生」、もう一度押すと「停止」する仕組みを作りたいです。
9
+ 「再生」、もう一度押すと「停止」する仕組みを作りたいです。
10
+
11
+
12
+
13
+ 一つのボタンで、「再生」と「停止」ができる仕組みです。
10
14
 
11
15
 
12
16
 
@@ -28,37 +32,23 @@
28
32
 
29
33
 
30
34
 
31
-
35
+ <img src="images/button.jpg" alt="Play Music" >
32
-
36
+
33
- <audio id="ターンテーブルのボタン" src="audio/音楽１.mp3" preload="auto"></audio>
37
+ <audio src="audio/1. .mp3" preload="auto">
34
-
38
+
39
+
40
+
35
- <script type="text/javascript">
41
+ <img src="images/button.jpg" class="audio-control" id="play" alt="PlayMusic" >
36
-
37
- $('#music-button').toggle(
42
+
38
-
39
- function () {
43
+
40
-
41
- document.getElementById('ターンテーブルのボタン').play();
44
+
42
-
43
- },
44
-
45
- function () {
46
-
47
- document.getElementById('ターンテーブルのボタン').pause();
48
-
49
- }
50
-
51
- );
52
-
53
- </script>
45
+ </body>
54
46
 
55
47
  ```
56
48
 
57
49
 
58
50
 
59
- 下記の画像URLをどの部分に入れれば機能するするのでしょうか？
51
+ 下記がCSSで再生ボタン箇所に画像のURLを入れてみましたが、うまく機能しません。
60
-
61
-
62
52
 
63
53
 
64
54
 
@@ -66,22 +56,186 @@
66
56
 
67
57
  ```ここに言語を入力
68
58
 
59
+
60
+
61
+ .audiojs audio {
62
+
63
+ }
64
+
65
+ /*　プレイヤー（再生バー）　*/
66
+
67
+ .audiojs {
68
+
69
+ width: 80px;
70
+
71
+ height: 28px;
72
+
73
+ background: none;
74
+
75
+ overflow: hidden;
76
+
77
+ font-family: monospace;
78
+
79
+ font-size: 12px;
80
+
81
+ -webkit-box-shadow: none;
82
+
83
+ -moz-box-shadow: none;
84
+
85
+ -o-box-shadow: none;
86
+
87
+ box-shadow: none;
88
+
89
+ }
90
+
91
+ /*　再生・停止ボタン　*/
92
+
93
+ .audiojs .play-pause {
94
+
95
+ width: 20px;
96
+
97
+ height: 20px;
98
+
99
+ padding: 0;
100
+
101
+ margin: 0;
102
+
103
+ float: left;
104
+
105
+ overflow: hidden;
106
+
107
+ image: url("images/button.jpg");
108
+
109
+ border: 1px solid #3A3A3A;
110
+
111
+ border-radius: 14px;
112
+
113
+ }
114
+
115
+ /*　再生・停止ボタンなどの p 要素　*/
116
+
117
+ .audiojs p {
118
+
119
+ display: none;
120
+
121
+ width: 26px;
122
+
123
+ height: 26px;
124
+
125
+ margin: 0px;
126
+
127
+ cursor: pointer;
128
+
129
+ }
130
+
131
+ .audiojs .play {
132
+
133
+ display: block;
134
+
135
+ }
136
+
137
+ /*　再生ボタン　*/
138
+
139
+ .audiojs .play {
140
+
69
- <a id="music-button" style="cursor:pointer;">
141
+ background: url("images/button.jpg") center center no-repeat;　
142
+
70
-
143
+ margin-left: 1.45px;
144
+
145
+ }
146
+
147
+ /*　読み込み中ボタン　*/
148
+
149
+ .audiojs .loading {
150
+
151
+ /*background: url("$1") center center no-repeat;*/
152
+
153
+ display: none;
154
+
155
+ }
156
+
157
+ /*　エラーボタン　*/
158
+
159
+ .audiojs .error {
160
+
161
+ /*background: url("$1") center center no-repeat;*/
162
+
163
+ display: none;
164
+
165
+ }
166
+
167
+ /*　停止ボタン　*/
168
+
169
+ .audiojs .pause {
170
+
71
- <img src="ボタン画像.jpg" alt="button" with="200" height="120"></a>
171
+ background: url("images/button.jpg") center center no-repeat;　←pauseボタン
172
+
173
+ }
174
+
175
+ .playing .play, .playing .loading, .playing .error {
176
+
177
+ display: none;
178
+
179
+ }
180
+
181
+ .playing .pause {
182
+
183
+ display: block;
184
+
185
+ }
186
+
187
+ .loading .play, .loading .pause, .loading .error {
188
+
189
+ display: none;
190
+
191
+ }
192
+
193
+ .loading .loading {
194
+
195
+ display: block;
196
+
197
+ }
198
+
199
+ .error .time, .error .play, .error .pause, .error .scrubber, .error .loading {
200
+
201
+ display: none;
202
+
203
+ }
204
+
205
+ .error .error {
206
+
207
+ display: block;
208
+
209
+ }
210
+
211
+ .error .play-pause p {
212
+
213
+ cursor: auto;
214
+
215
+ }
216
+
217
+ .error .error-message {
218
+
219
+ display: block;
220
+
221
+ }
222
+
223
+
72
224
 
73
225
  ```
74
226
 
75
-
227
+ なお上記のコードに関しては、[こちら](http://weble.hatenablog.jp/entry/2014/08/28/01)より参考にさせていただきました。
76
-
228
+
229
+
230
+
77
- 現在表示されている内容はこちらです。
231
+ やりたい内容はこちらになります。
78
-
232
+
79
- ![イメージ説明](7c0e28d187173a3735114c458ce41c01.png)
233
+ ![イメージ説明](0bb515e8ff0de3bcd417245e8cc85f46.png)
80
-
81
-
82
-
83
-
84
-
85
-
86
-
234
+
235
+
236
+
237
+
238
+
239
+
240
+
87
- よろしくお願いします。
241
+ ヒントをください。よろしくお願いします。

1

具体的な画像を追加

2019/04/17 10:27

投稿

StanS.
StanS.

スコア25

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,12 @@
1
1
  Webページにaudiojs を埋め込みました。
2
2
 
3
+ audiojsソース元は、http://kolber.github.io/audiojs/　です。
4
+
5
+
6
+
7
+ 仮のボタンの画像を使って
8
+
3
- ボタンの画像があるのですが、ボタンを押すと、再生、もう一度押すと停止する仕組みを作りたいです。
9
+ ボタンを押すと、「再生」、もう一度押すと「停止」する仕組みを作りたいです。
4
10
 
5
11
 
6
12
 
@@ -50,7 +56,11 @@
50
56
 
51
57
 
52
58
 
53
- 下記のボタン画像をどの部分に入れれば、機能するのか教えてください。
59
+ 下記の画像URLをどの部分に入れれば機能するするのでしょうか？
60
+
61
+
62
+
63
+
54
64
 
55
65
 
56
66
 
@@ -64,4 +74,14 @@
64
74
 
65
75
 
66
76
 
77
+ 現在表示されている内容はこちらです。
78
+
79
+ ![イメージ説明](7c0e28d187173a3735114c458ce41c01.png)
80
+
81
+
82
+
83
+
84
+
85
+
86
+
67
87
  よろしくお願いします。