Audio-Player fürs Forum

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages �

Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! � Audio-Player fürs Forum

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News. Stellen Sie Ihr eigene Webseite vor. Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? �rger mit dem PC, Laptop oder Tablet - Fragen & Antworten? Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten. XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! Das neue Template Xobor (v6). Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie. Wasserstoff - Energietr�ger der Zukunft. Elektronik & Elektrotechnik Elektronik & Elektrotechnik - Fragen und Antworten Elektronik & Elektrotechnik - Praxis - Highlights Die besten Links! Empfehlenswerte und interessante Links! Link - Suche. Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones. Lob, Kritik & Verbesserungsvorschl�ge. Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit. Alles, was noch so �brig bleibt. Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel.

#1 | Audio-Player fürs Forum datum

07.09.2022 16:30 (zuletzt bearbeitet: 10.09.2022 10:27)

Daishi

Informationen anzeigen

Beitr�ge:	392
Registriert seit:	08.01.2022

Homepage:	Nicht angegeben
Letzte Spende	Betrag 15 � Forum Spende
Sternzeichen	Steinbock
Likes	334

Hallo Wolfgang, ich habe hier im Forum keinen Audio-Player gesehen. Da dachte ich, ich bastele mal einen.

Er ist schlicht und sehr einfach zu bedienen. (Wählen Sie ein Lied aus. Klicken Sie auf eine beliebige Stelle, um einen Song auszuwählen.) Man kann dann direkt vom PC seine Musik laden.

Ich habe es mal spaßeshalber auf "Eigene Seiten" im Testforum eingefügt. Was mir nur spanisch vorkommt ist, ich habe die CSS eingefügt, keine Veränderung am Style im Forum, sonst war immer alles verzerrt. Ich dachte oh gut, aber auf "Eigene Seite" grauenhaft.

Laden und abspielen kann man die Musik, sieht auch grauenhaft aus. Ein Leihe weiß nicht, wo er klicken muss, da der Player die Symbole nicht anzeigt und die Texte sind voll zusammengewürfelt. Sieht grausam aus.

Hier eine saubere Demo Ansicht

Audio-Player!

Der HTML Code

1
2
3
4
5
6
7
8
9
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
  <img id="art-bg">
 
<div id="player">
    <img id="album-art">
    <h1 id="title">Wählen Sie ein Lied aus.</h1>
    <h2 id="artist">Klicken Sie auf eine beliebige Stelle, um einen Song auszuwählen.</h2>
    <div id="controls" style="display: none;">
        <span id="back">skip_previous</span>
        <span id="playpause">play_circle_filled</span>
        <span id="forward">skip_next</span>
    </div>
    <input id="progress" type="range" min="0" max="1" step="any" value="0" style="display: none;"></input>
    <audio id="player-audio"></audio>
    <input id="player-file" type="file" style="position:absolute;top:-10000px;left:-10000px;" accept="audio/*"></input>
</div>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/musicmetadata/2.0.2/musicmetadata.min.js"></script>
 

<script id="rendered-js">
var fileInput = document.getElementById("player-file");
var audioPlayer = document.getElementById("player-audio");
var progressBarColor = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEUpgLkZ2NPWAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==";
var progress = document.getElementById("progress");
 
function setData(file) {
  var artBG = document.getElementById('art-bg');
  var albumArt = document.getElementById('album-art');
  var artist = document.getElementById("artist");
  var title = document.getElementById("title");
  var controls = document.getElementById("controls");
  var progress = document.getElementById("progress");
 
  musicmetadata(file, function (err, result) {
    if (err) return console.error(err);
 
    if (result.picture.length > 0) {
      var picture = result.picture[0];
      var url = URL.createObjectURL(new Blob([picture.data], { 'type': 'image/' + picture.format }));
      document.getElementById('art-bg').src = url;
      document.getElementById('album-art').src = url;
      document.getElementById('art-bg').style.opacity = 1;
      document.getElementById('album-art').style.opacity = 1;
    }
 
    artist.innerHTML = result.artist.join(", ").replace(/[\u0000-\u9999<>\&]/gim, function (i) {
      return '&#' + i.charCodeAt(0) + ';';
    });
 
    title.innerHTML = result.title.replace(/[\u0000-\u9999<>\&]/gim, function (i) {
      return '&#' + i.charCodeAt(0) + ';';
    });
 
    controls.style.display = "block";
    progress.style.display = "block";
  });
}
 
document.body.addEventListener("click", function (evt) {
  fileInput.click();
}, { once: true });
 
fileInput.addEventListener("change", function (evt) {
  if (fileInput.files && fileInput.files[0]) {
    var song = fileInput.files[0];
    audioPlayer.src = window.URL.createObjectURL(song);
 
    setData(song);
  }
}, false);
 
audioPlayer.addEventListener("pause", function () {
  document.getElementById("playpause").innerHTML = "play_circle_filled";
}, false);
 
audioPlayer.addEventListener("play", function () {
  document.getElementById("playpause").innerHTML = "pause_circle_filled";
}, false);
 
audioPlayer.addEventListener("timeupdate", function () {
  var prog = audioPlayer.currentTime / audioPlayer.duration;
  progress.value = prog;
  document.styleSheets[0].cssRules[11].style.backgroundSize = Math.floor(prog * 10000) / 100 + "% 100%";
}, false);
 
document.getElementById("playpause").addEventListener("mouseup", function () {
  if (audioPlayer.paused) {
    audioPlayer.play();
  } else {
    audioPlayer.pause();
  }
}, false);
 
progress.addEventListener("change", function () {
  audioPlayer.currentTime = progress.value * audioPlayer.duration;
}, false);
//# sourceURL=pen.js
    </script>  
 

Schließen

Der CSS - Code

1
2
3
4
5
6
7
8
9
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
 
  @import url(https://fonts.googleapis.com/icon?family=Material+Icons|Roboto:100,300,400);
 

body {
    background: #222;
    overflow: hidden;
}
 
#art-bg {
    top: 50%;
    left: 50%;
    min-width: 100vmax;
    min-height: 100vmax;
    position: absolute;
    transform: translate(-50%, -50%);
    filter: blur(40px) brightness(0.5) saturate(0.8);
    background: #222;
    opacity: 0;
    transition: opacity 1s;
}
 
#player {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    width: 50vmin;
    height: 50vmin;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
#player > #album-art {
    width: 25vmin;
    height: 25vmin;
    background: #333;
    opacity: 0;
    transition: opacity 1s;
}
 
#player > #title {
    text-shadow: 0px 0px 4px #000;
    font-family: "Roboto", sans-serif;
    margin: 16px 0 0 0;
    color: #ecf0f1;
    font-weight: 100;
    text-align: center;
}
 
#player > #artist {
    text-shadow: 0px 0px 4px #000;
    font-family: "Roboto", sans-serif;
    margin: 8px 0 16px 0;
    color: #ecf0f1;
    font-weight: 200;
    text-align: center;
}
 
#player > #controls {
    font-family: "Material Icons";
    font-size: 48px;
    color: #ecf0f1;
    cursor: default;
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    line-height: 64px;
}
 
#player > #controls > *:hover {
    color: #3498db;
    cursor: pointer;
}
 
/* Schieberegler-CSS */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 3px 0;
  border: none;
  background: rgba(0, 0, 0, 0);
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  margin: 0;
  width: 100%;
  height: 6px;
  cursor: pointer;
  border: none;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEUpgLkZ2NPWAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==), #ecf0f1;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  border-radius: 25px;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 4px #2c3e50;
  height: 12px;
  width: 12px;
  border-radius: 50px;
  background: #3498db;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3px;
  opacity: 0;
  transition: opacity 0.25s;
}
 
input[type=range]:hover::-webkit-slider-thumb,
input[type=range]:active::-webkit-slider-thumb {
    opacity: 1;
}
 
input[type=range]::-moz-range-track {
  margin: 0 4px;
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: #ecf0f1;
  border-radius: 25px;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 4px #2c3e50;
  border: 1.1px solid rgba(44, 62, 80, 0);
  height: 12px;
  width: 12px;
  border-radius: 50px;
  background: #3498db;
  cursor: pointer;
  opacity: 0;
}
 
input[type=range]:hover::-moz-range-thumb {
    opacity: 1;
}
 
input[type=range]::-ms-track {
  margin: 0 4px;
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
  opacity: 0;
}
input[type=range]::-ms-fill-lower {
  background: #ecf0f1;
  border-radius: 50px;
}
input[type=range]::-ms-fill-upper {
  background: #ecf0f1;
  border-radius: 50px;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 4px #2c3e50;
  border: 1.1px solid rgba(44, 62, 80, 0);
  height: 12px;
  width: 12px;
  border-radius: 50px;
  background: #3498db;
  cursor: pointer;
  height: 6px;
  opacity: 0;
}
input[type=range]:focus::-ms-fill-lower {
  background: #ecf0f1;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ecf0f1;
}
  
 

Schließen

Ich hoffe, dass meine Inspiration gut ankommt.

Meine Gedanken und Meinung:

Meine Idee war es den Player auf "Eigene Seiten" anzeigen zu lassen oder als Foren-Code oder BB - Code. Ich selbst bekomme es nicht umgeschrieben, da bin ich auf Hilfe von anderen angewiesen, die das können. Sie können auch noch ihre Ideen damit einfügen, gemeinsam sind wir stark und ein starkes Team.

Ich denke so wie es aussieht, müssen die CSS - Tags geändert werden, dass die Ansicht im Xobor - Forum sauber ist.

Mit freundlichen Grüßen

Daishi

Daishi

Wolfgang findet das Top!

Antworten

#2 | Audio-Player fürs Forum datum

07.10.2022 20:11

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3816
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Skorpion
Likes	1642

Audio-Player fürs Forum

Hallo Daishi,
mal wieder besten Dank für das Skript!

Habe es hinbekommen!

Als erstes musste ich im Forum den "body" und alle "flex-Einstellungen" erstmal löschen, damit ich den Player überhabt sehen und testen konnte!
Dann wurde nicht die Player-Konsole, wie im CodePen angezeigt, sondern eine Beschreibungen für die Bedienungs-Button, sehr unschön ("skip_previous, play_circle_filled, skip_next").
Sonst läuft der Player echt Klasse! Top!
Um den Player richtig nutzen zu können, ohne das er stört, fehlt ein Ende-Button und ein Button zum Minimieren!
Die nächsten Fragen stellten sich, wie rufe ich den Player auf und wo soll der Start-Button platziert werden!

Was kann das abgeänderte Skript?

Der Player wird durch einen Klick auf eine Lautsprecher-Grafik links aufgerufen!
Der Button ist fixiert und somit auch beim Scrollen der Seite immer anklickbar!
Beim Anklicken, wird gleich das Verzeichnis geöffnet und ein Musiktitel kann ausgesucht werden!
Für die Text-Beschreibungen der Player-Elemente sind Grafik-Button gesetzt worden!
Rechts oben im Player gibt es ein Beenden-Button und einen zum Minimieren!
Funktioniert in allen Templates!

Installation für alle Templates & Mobil

Einbau-Anleitung:

Die neuen Player-Button:

Der Forum-Player in Aktion:

Der Forum-Player in Aktion

Der CSS-Eintrag und das Skript können in die Fußzeile oder besser als Plugin in "Untere Leiste - header" kopiert! werden
Wichtig! Im Plugin müssen rechts oben "Unterstützte Templates" markiert werden, z.B.: Business - Template (144) (Auswahl mit Mausklick oder Strg + Mausklick)!
In Zeile 201 steckt der Auslöse-Button zum Aufrufen des Players
In Zeile 206 sind die dazu gekommenen Exit- Button und der Button zum Minimieren!
In Zeile 211-213 stecken die neuen Player-Button!
In Zeile 244 steckt das Player-Skript und ist für den Funktionsablauf notwendig!

1
2
3
4
5
6
7
8
9
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
 
<style>
#art-bg {
  position: absolute;
  background: #222;
  opacity: 0;
  transition: opacity 1s;
  z-index:999999;
}
 
#player {
  display:none; 
  position: absolute;
  top: 0%;
  left:80px;
  background: #222; 
  padding:60px 10px 30px 10px;
  text-align:center;    
  align-items: center;
  border-radius:0 0 10px 10px; 
  cursor: pointer; 
  z-index:999998;
}
 
#player > #album-art {
  width: 25vmin;
  height: 25vmin;
  background: #333;
  opacity: 0;
  transition: opacity 1s;
}
 
#player > #title {
  text-shadow: 0px 0px 4px #000;
  font-family: "Roboto", sans-serif;
  margin: 16px 0 0 0;
  color: #ecf0f1;
  font-weight: 100;
  text-align: center;
}
 
#player > #artist {
  text-shadow: 0px 0px 4px #000;
  font-family: "Roboto", sans-serif;
  margin: 8px 0 16px 0;
  color: #ecf0f1;
  font-weight: 200;
  text-align: center;
}
 
#player > #controls {
  font-family: "Material Icons";
  font-size: 48px;
  color: #ecf0f1;
  cursor: default;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  line-height: 64px;
}
 
#player > #controls > *:hover {
  color: #3498db;
  cursor: pointer;
}
 
/* Schieberegler-CSS */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 3px 0;
  border: none;
  background: rgba(0, 0, 0, 0);
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  margin: 0;
  width: 100%;
  height: 6px;
  cursor: pointer;
  border: none;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEUpgLkZ2NPWAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==), #ecf0f1;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  border-radius: 25px;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 4px #2c3e50;
  height: 12px;
  width: 12px;
  border-radius: 50px;
  background: #3498db;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3px;
  opacity: 0;
  transition: opacity 0.25s;
}
 
input[type=range]:hover::-webkit-slider-thumb, input[type=range]:active::-webkit-slider-thumb {
  opacity: 1;
}
 
input[type=range]::-moz-range-track {
  margin: 0 4px;
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: #ecf0f1;
  border-radius: 25px;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 4px #2c3e50;
  border: 1.1px solid rgba(44, 62, 80, 0);
  height: 12px;
  width: 12px;
  border-radius: 50px;
  background: #3498db;
  cursor: pointer;
  opacity: 0;
}
 
input[type=range]:hover::-moz-range-thumb {
  opacity: 1;
}
 
input[type=range]::-ms-track {
  margin: 0 4px;
  width: 100%;
  height: 6px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
  opacity: 0;
}
input[type=range]::-ms-fill-lower {
  background: #ecf0f1;
  border-radius: 50px;
}
input[type=range]::-ms-fill-upper {
  background: #ecf0f1;
  border-radius: 50px;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 4px #2c3e50;
  border: 1.1px solid rgba(44, 62, 80, 0);
  height: 12px;
  width: 12px;
  border-radius: 50px;
  background: #3498db;
  cursor: pointer;
  height: 6px;
  opacity: 0;
}
input[type=range]:focus::-ms-fill-lower {
  background: #ecf0f1;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ecf0f1;
}
.musik_on {
  position: fixed; 
  left: 20px; 
  top:150px;
  width:50px; 
  border:1px solid #aaaaaa;
  border-radius:50%; 
  cursor: pointer;
  z-index:999999 !important;
}
 
.play_but {
  position: absolute; 
  top:0; 
  right:10px; 
  color:#ffffff; 
  font-weight:bold;
  margin-bottom:20px;
}
 
.play_min {
  position: absolute; 
  right:50px; 
  top:10px;
  font-size: 45px; 
}
 
.play_exit {
  position: absolute;
  right:10px; 
  top:10px; 
  font-size:30px;
}
</style>
 
<!-- Auslöse-Button -->
<img class="musik_on" src="//files.homepagemodules.de/b104774/a_389_0d1ec095.png">
 
<!-- Player -->
<img id="art-bg" style="width:0; height:0;">
<div id="player">
    <div class="play_but"><span class="play_min">-</span> <span class="play_exit">x</span> </div>
    <img id="album-art">
    <h1 id="title"> Liste wird aufgerufen!</h1>
    <h2 id="artist"></h2>
    <div id="controls" style="display: none;">
        <span id="back"><img width="50px;" src="//files.homepagemodules.de/b104774/a_481_22ac5d43.png"></span>
        <span id="playpause"><img width="50px;" src="//files.homepagemodules.de/b104774/a_479_ea974b22.png"></span>
        <span id="forward"><img width="50px;" src="//files.homepagemodules.de/b104774/a_482_d5025c84.png"></span>
    </div>
    <center><input id="progress" type="range" min="0" max="1" step="any" value="0" style="display: none;"></input></center>
    <audio id="player-audio"></audio>
    <input id="player-file" type="file" style="position:absolute; top:-10000px;left:-10000px;" accept="audio/mp3"></input>
</div>
</div>
 
<script>
window.addEventListener('load', function(){
 
//Start Player
$('.musik_on').on('click',function(){
$('#player').show();
$('#player, #art-bg').css('visibility','visible')
playerforum();
});
 
//Exit
$('.play_exit').on('click',function(){
location. reload();
});
 
//Minimieren
$('.play_min').on('click',function(){
$('#player,#art-bg').css('visibility','hidden');
});
 
});
</script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/musicmetadata/2.0.2/musicmetadata.min.js"></script>
<script>
function playerforum() {
var fileInput = document.getElementById("player-file");
var audioPlayer = document.getElementById("player-audio");
var progressBarColor = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEUpgLkZ2NPWAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==";
var progress = document.getElementById("progress");
 
function setData(file) {
  var artBG = document.getElementById('art-bg');
  var albumArt = document.getElementById('album-art');
  var artist = document.getElementById("artist");
  var title = document.getElementById("title");
  var controls = document.getElementById("controls");
  var progress = document.getElementById("progress");
 
  musicmetadata(file, function (err, result) {
    if (err) return console.error(err);
 
    if (result.picture.length > 0) {
      var picture = result.picture[0];
      var url = URL.createObjectURL(new Blob([picture.data], { 'type': 'image/' + picture.format }));
      document.getElementById('art-bg').src = url;
      document.getElementById('album-art').src = url;
      document.getElementById('art-bg').style.opacity = 1;
      document.getElementById('album-art').style.opacity = 1;
    }
 
    artist.innerHTML = result.artist.join(", ").replace(/[\u0000-\u9999<>\&]/gim, function (i) {
      return '&#' + i.charCodeAt(0) + ';';
    });
 
    title.innerHTML = result.title.replace(/[\u0000-\u9999<>\&]/gim, function (i) {
      return '&#' + i.charCodeAt(0) + ';';
    });
 
    controls.style.display = "block";
    progress.style.display = "block";
  });
}
 
document.body.addEventListener("click", function (evt) {
  fileInput.click();
}, { once: true });
 
fileInput.addEventListener("change", function (evt) {
  if (fileInput.files && fileInput.files[0]) {
    var song = fileInput.files[0];
    audioPlayer.src = window.URL.createObjectURL(song);
 
    setData(song);
  }
}, false);
 
audioPlayer.addEventListener("pause", function () {
  document.getElementById("playpause").innerHTML = '<img width="50px;"src="https://files.homepagemodules.de/b104774/a_479_ea974b22.png">';
}, false);
 
audioPlayer.addEventListener("play", function () {
  document.getElementById("playpause").innerHTML = '<img width="50px;" src="https://files.homepagemodules.de/b104774/a_480_6614581a.png">';
}, false);
 
audioPlayer.addEventListener("timeupdate", function () {
  var prog = audioPlayer.currentTime / audioPlayer.duration;
  progress.value = prog;
  document.styleSheets[0].cssRules[11].style.backgroundSize = Math.floor(prog * 10000) / 100 + "% 100%";
}, false);
 
document.getElementById("playpause").addEventListener("mouseup", function () {
  if (audioPlayer.paused) {
    audioPlayer.play();
  } else {
    audioPlayer.pause();
  }
}, false);
 
progress.addEventListener("change", function () {
  audioPlayer.currentTime = progress.value * audioPlayer.duration;
}, false);
//# sourceURL=pen.js
 
};
//playerforum();
</script>
 

Schließen

Bis dann und viel Spaß
Wolfgang

charlie1965 findet das Top!

Antworten

3D Decken - Karussell / 3D Bilder Galerie / 3D Lightbox / 3D ohne Namen � � To-Do-Liste

�hnliche Themen

Antworten

Letzter Beitrag

Forum Design
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Daishi 4 10.07.2023 00:22
Daishi • Zugriffe: 614

Frage! Wie kann ich hier im Forum den HTML5 Player dauerhaft hören?
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Daishi

20.01.2023 14:50
von

Kipper-Spedition • Zugriffe: 492

Radio Player einbauen
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von charlie1965 2 28.08.2023 10:41
Kipper-Spedition • Zugriffe: 538
Sprechblasen fürs Forum - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 1 10.08.2022 18:49
Wolfgang • Zugriffe: 961

Kostenlose Onliner Converter für Audio und Video - Deutsch
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

11.08.2019 14:58
von

Wolfgang • Zugriffe: 950

Herzlich Willkommen im Forum
Erstellt im Forum Willkommen! von Wolfgang 0 13.10.2012 14:10
Wolfgang • Zugriffe: 6192
Sound beim Einloggen ins Forum
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang 3 16.02.2015 23:11
Wolfgang • Zugriffe: 2810

Schneeflocken im Forum mit JavaScript und Marquee
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

14.03.2017 13:53
von

Wolfgang • Zugriffe: 7283

Die Top-Favoriten aus diesem Forum
Erstellt im Forum Alles, was noch so �brig bleibt. von Wolfgang 0 10.04.2007 17:57
Wolfgang • Zugriffe: 19716

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages �

Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! � Audio-Player fürs Forum

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

93%