MP3 / Audio Player mit Geschwindigkeitsregelung

vitalis · 27. Januar 2019

Guten Morgen liebe Joomla-Community,

bin auf der suche nach einem Player Audio oder auch Video Player mit Geschwindigkeitsregelung für Mp3 und Midi Dateien für meine Chorgemeinschaft.

Bis jetzt hab ich den Joomla HTML5 Audio Plugin , will aber gerne sowas wie auf Choralia mit dem Regler für Geschwindigkeit bzw. Tempo .

Das kann auch was ganz einfaches sein , wichtig dass der Regler unter dem Player ist wie auf dem Bild zusehen .

Spoiler anzeigen

Hab mir schon den Royal Audio Player angeschaut , da ist aber Regler ganz versteckt.

Würdet Ihr mir bitte was empfehlen ?

Liebe Grüße und einen schönen Sonntag

Vitalis

vitalis · 11. Februar 2019

Hallo zusammen,

verstehe nicht warum , aber Beitrag wird immer wieder als "Erledigt" markirt ?

Leider bin ich weiter gekommen, vielleicht mit HTML Code oder Java einen Player erstellen ?

Kann mir jemand dabei helfen ?

Spoiler anzeigen

time4mambo · 11. Februar 2019

lder"><video id="myVideo" controls="controls" width="300" height="150">

Zitat von vitalis

Leider bin ich weiter gekommen,

Dann ist doch alles bestens!

Natürlich ist mir klar, dass du dich da verschreiben hast - aber das musste sein

Wenn keiner auf dein Post antwortet, insbesondere bei solch speziellen Anfragen, dann musst du auch mal akzeptieren, dass wir auch nichts wissen. Ich für meinen Teil habe sofort unter HTML5 nachgeschaut und bin dort nicht fündig geworden. Eine Erweiterung, die das kann, kenne ich nicht. Und wenn musst halt selber in der JED suchen gehen!

Axel

vitalis · 11. Februar 2019

Hi Alex ,

hier hab ich code gefunden , aber wenn ich in neuem Beitrag ( Joomla! 3.9.2 Stable , Safari oder Opera ) Code einfüge, funktioniert nur Video , der Geschwindigkeit Regler funktioniert nicht . Auf Live HTML Ansicht ( nicht auf meine Homepage) , aber unter Opera funktioniert alles einwandfrei .

Irgendwas mach ich falsch ...

Spoiler anzeigen

Indigo66 · 11. Februar 2019

Zitat von vitalis

Irgendwas mach ich falsch ...

Du hast Deinen Editor nicht so konfiguriert dass der Code nicht gefiltert werden soll.

Alles zum Thema findest Du in unseren Anleitungen.

vitalis · 11. Februar 2019

Zitat von Indigo66

Du hast Deinen Editor nicht so konfiguriert dass der Code nicht gefiltert werden soll.

Alles zum Thema findest Du in unseren Anleitungen.

Hi Tom

gebe mir bitte direkten Link .

Mein HTML ist bestimmt auf 5 %

p.s. noch ein Code gefunden , der ziemlich gut ist , und über Opera koppiert und mit Online HTML bearbeitet , leider ändern sich die Farben nach dem man Tempo ändert ...

Für einen passenden Modul oder Plugin in bin ich bereit zu bezahlen , ich verliere so viel Zeit mit hier und her probieren .

Spoiler anzeigen

Code

<h1></h1>
<p></p>
<p><main> <video width="300" height="150" id="videoElement" controls="controls" poster="velocity-thumbnail.jpg">
            <source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-Mobile.mp4" type="video/mp4" media="all and (max-width:680px)" /> 
            <source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-Mobile.webm" type="video/webm" media="all and (max-width:680px)" /> 
            <source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-SD.mp4" type="video/mp4" />
            <source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-SD.webm" type="video/webm" />
            <p>Sorry, there's a problem playing this video. Please try using a different browser.</p>
        </video>
<p class="controls"><label>playbackRate: <input type="range" step="0.1" min="0.5" max="2" value="1" id="rateSlider" /></label> <span id="rateOutput" aria-live="polite"></span></p>
</main></p>
<p></p>
<aside></aside>
<footer></footer>
<p>
<script>// <![CDATA[
// Inline code is for educational purposes. Best practice is to put your scripts in external files.
    (function() {
        'use strict';
        
        var video = document.getElementById("videoElement");
        var rateOutput = document.getElementById('rateOutput');
        var rateSlider = document.getElementById('rateSlider');
        
        rateSlider.onchange = function(event) {
            // When the slider is moved, changed the video's playback rate
            video.playbackRate = rateSlider.value;
        };
        
        video.onplay = function(event) {
            // We can only change the playbackRate once the video has started playing
            video.playbackRate = rateSlider.value;
        };
        
        video.onratechange = function(event) {
            // When the playback rate changes, display the new value
            rateOutput.textContent = video.playbackRate;
            
            // And let's have some colourful fun while we're here
            document.body.style.background = 'hsl(' + (video.playbackRate * 180) + ', 50%, 15%)';
        };
        
        rateOutput.textContent = rateSlider.value;
    })();
// ]]></script>
</p>

Alles anzeigen

Danke

vitalis · 11. Februar 2019

Zitat von Indigo66

Du hast Deinen Editor nicht so konfiguriert dass der Code nicht gefiltert werden soll.

TinyMCE habe jetzt -> script,applet,iframe entfernt .Funktioniert HTLM Audio Regler trotzdem nicht.

Soll ich anderen Editor installieren ?

Spoiler anzeigen

Indigo66 · 11. Februar 2019

Lies doch einfach die Anleitungen: Wie iFrame- oder JavaScript-Code in einen Beitrag ohne das Code bereinigt wird.

Re:Later · 11. Februar 2019

Zitat von vitalis

TinyMCE habe jetzt -> script,applet,iframe entfernt

Darf man halt nicht, ohne die Warnung zu beachten:

time4mambo · 11. Februar 2019

Ungeachtet dessen, dass ich nicht weiß, wer "Alex" ist, kannst du mit dem Code meines Wissens die Geschwindigkeit nicht per Regler steuern.

Axel

vitalis · 11. Februar 2019

Zitat von Indigo66

Lies doch einfach die Anleitungen: Wie iFrame- oder JavaScript-Code in einen Beitrag ohne das Code bereinigt wird.

Vielen Dank für Link ! Hat mir geholfen

Zitat von time4mambo

Ungeachtet dessen, dass ich nicht weiß, wer "Alex" ist, kannst du mit dem Code meines Wissens die Geschwindigkeit nicht per Regler steuern.

Axel

Axel , Sorry

Zitat

meines Wissens die Geschwindigkeit nicht per Regler steuern

es geht, Regler funktioniert endlich :

- TinyMCE Editor unter Systemkonfiguration abschalten

- Im Beitrag erscheint dann nur der Quellcode

- Quellcode eintragen ,speichern

- TinyMCE Editor wieder einschalten

Quellcode

Code

<h1></h1>
<p></p>
<p><main> <video width="300" height="150" id="videoElement" controls="controls" poster="velocity-thumbnail.jpg">
            <source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-Mobile.mp4" type="video/mp4" media="all and (max-width:680px)" /> 
            <source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-Mobile.webm" type="video/webm" media="all and (max-width:680px)" /> 
            <source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-SD.mp4" type="video/mp4" />
            <source src="https://s3-ap-northeast-1.amazonaws.com/daniemon/demos/Velocity-SD.webm" type="video/webm" />
            <p>Sorry, there's a problem playing this video. Please try using a different browser.</p>
        </video>
<p class="controls"><label>playbackRate: <input type="range" step="0.1" min="0.5" max="2" value="1" id="rateSlider" /></label> <span id="rateOutput" aria-live="polite"></span></p>
</main></p>
<p></p>
<aside></aside>
<footer></footer>
<p>
<script>// <![CDATA[
// Inline code is for educational purposes. Best practice is to put your scripts in external files.
    (function() {
        'use strict';
        
        var video = document.getElementById("videoElement");
        var rateOutput = document.getElementById('rateOutput');
        var rateSlider = document.getElementById('rateSlider');
        
        rateSlider.onchange = function(event) {
            // When the slider is moved, changed the video's playback rate
            video.playbackRate = rateSlider.value;
        };
        
        video.onplay = function(event) {
            // We can only change the playbackRate once the video has started playing
            video.playbackRate = rateSlider.value;
        };
        
        video.onratechange = function(event) {
            // When the playback rate changes, display the new value
            rateOutput.textContent = video.playbackRate;
            
            // And let's have some colourful fun while we're here
            document.body.style.background = 'hsl(' + (video.playbackRate * 180) + ', 50%, 15%)';
        };
        
        rateOutput.textContent = rateSlider.value;
    })();
// ]]></script>
</p>

Alles anzeigen

nur noch kleines Problem, jetzt muss man noch anstatt Video meine MP3 Audios eintragen und eventuell

hier noch was ändern, da sich Hintergrund bei playbackRate schon ab 1.2 farblich ändert.

Code

document.body.style.background = 'hsl(' + (video.playbackRate * 180) + ', 50%, 15%)';

vitalis · 13. Februar 2019

update:

- mit der Audio Datei hab ich hingekommen , einfach mp3 Adresse eingegeben anstatt Video Datei Adresse->Fertig

- leider das gleiche Script zwei oder 3 mal in einem Betrag funktionirt nicht , Tempo Regler funktioniert nur mit erste mp3 ...,bei der zweite mp3 funktioniert nur play .

Kann mir bitte jemand mit dem Script helfen ?

Danke

time4mambo · 14. Februar 2019

Eventuell funktioniert es, wenn du den Code nicht in einen Beitrag, sondenr in ein eigenes Modul jeweils legst und dann die Module in einen Beitrag legst. So als Idee-

Axel

vitalis · 17. Februar 2019

Hab 2 Module erstellt mit diesem ORIGINAL Script und ausgeschaltet Editor - TinyMCE , neuen Beitrag erstellt und eingefügt :

<p>{module Eigenes Modul 1}</p>

<p>{module Eigenes Modul 2}</p>

Ergebnis : Video 1 (Modul 1) Tempo Regler funktioniert , Video 2 (Modul 2) Tempo Regler funktioniert nicht.

Ich will eigentlich nur einen Tempo Regler wo unter dem Player steht , um Chor Music zu üben : schneller oder langsamer .

Uns es soll ziemlich einfach sein , Regler soll nicht versteckt sein in Player Panel .

Spoiler anzeigen

anka · 17. Februar 2019

Hallo Vitalis

Du postest hier immer wieder neue Codeschnipsel und verlinkst auf andere Scripte, so dass mittlerweile kaum noch jemand nachvollziehen kann, was genau du wo und wie eingefügt hast. Kannst du uns einen Link zu deiner Seite geben?

vitalis · 17. Februar 2019

Hi Anka

Ja klar , das ist meine Test Seite http://iptv.es.ht

astrid · 17. Februar 2019

Beiden Videos haben die gleiche ID.

id="myVideo"

Eine ID darf es nur einmal auf einer Seite geben. Kannst du diese selbst ändern?

vitalis · 17. Februar 2019

Zitat von astrid

Beiden Videos haben die gleiche ID.

id="myVideo"

Eine ID darf es nur einmal auf einer Seite geben. Kannst du diese selbst ändern?

wie mach ich das ?

mit id="myVideo1" id="myVideo2" funktioniert leider nicht

time4mambo · 18. Februar 2019

Na, du hast doch den Code selber eingefügt und so die beiden Videos eingebunden. Je Video eine ID. Ergo: Bindest du zwei Videos ein, dann müssen beide andere IDs haben.

Code

  <video id="myVideo1" controls>
    <source src="http://hyperaud.io/video/obama-responds.mp4" 
          type='video/mp4' />
  </video>

  <video id="myVideo2" controls>
    <source src="http://hyperaud.io/video/EIN_ANDERES_VIDEO.webm" 
          type='video/webm' />
  </video>

vitalis · 18. Februar 2019

id="pbr" und id="currentPbr" hab ich auch mit verschiedenen ID´s eigefügt , nun der funktionierende Playback Rate Regle funktioniert nur am letzem Video (bzw. Audio ) .

So , ich denke da ist was noch mit dem Java code , mann muss per Code sagen : regele alle Videos nicht nur letztes Video, oder ?