musikwelten
Neues Mitglied
Liebe Forumsmitglieder,
das ist mein erster Eintrag auf html.de und meine Programmierfähigkeiten sind leider noch begrenzt. Ich bin dabei, in InDesign Cs6 eine Musikapp zu gestalten - mit Noten und Musik. InDesign stellt nur einen Play/Pause - Button zur Verfügung: aber es gibt die Möglichkeit, html einzubinden. Ihr kennt sicherlich die Problematik der verschiedenen Audioformate (mp3/ogg) und weitere Probleme bei IOS und Android. Meine Idee ist, einen reinen html5 Player zu programmieren, allerdings mit erweiterten Funktionen: Stop Button, Loop Button (für On/Off Looping) und eine Progressbar (mit FF- und REW- Funktionen). Diese Funktionen habe ich z. T. schon mit eigenen Images umgestaltet. Der „Grundplayer" funktioniert.
Meine Fragen lauten: (1) Lassen sich diese zusätzlichen Controller überhaupt mit den derzeitigen Möglichkeiten von html5 programmieren?
(2) Ich besitze derzeit nur ein iPad: Funktioniert der unten angegebene Player überhaupt auf Android?
Ich bitte Euch um Eure Hilfe!
Mod-Edit: Code-Tags hinzugefügt - Beim nächsten Mal bitte dran denken (XraYSoLo)
das ist mein erster Eintrag auf html.de und meine Programmierfähigkeiten sind leider noch begrenzt. Ich bin dabei, in InDesign Cs6 eine Musikapp zu gestalten - mit Noten und Musik. InDesign stellt nur einen Play/Pause - Button zur Verfügung: aber es gibt die Möglichkeit, html einzubinden. Ihr kennt sicherlich die Problematik der verschiedenen Audioformate (mp3/ogg) und weitere Probleme bei IOS und Android. Meine Idee ist, einen reinen html5 Player zu programmieren, allerdings mit erweiterten Funktionen: Stop Button, Loop Button (für On/Off Looping) und eine Progressbar (mit FF- und REW- Funktionen). Diese Funktionen habe ich z. T. schon mit eigenen Images umgestaltet. Der „Grundplayer" funktioniert.
Meine Fragen lauten: (1) Lassen sich diese zusätzlichen Controller überhaupt mit den derzeitigen Möglichkeiten von html5 programmieren?
(2) Ich besitze derzeit nur ein iPad: Funktioniert der unten angegebene Player überhaupt auf Android?
Ich bitte Euch um Eure Hilfe!
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Audio</title>
<script type="text/javascript">
function playAudio()
{
document.getElementById ("player").play();
document.getElementById ("pausebutton").style.display = "";
document.getElementById ("playbutton").style.display = "none";
}
function pauseAudio()
{
document.getElementById ("player").pause();
document.getElementById ("playbutton").style.display = "";
document.getElementById ("pausebutton").style.display = "none";
}
function progressBar ()
{
timeCurrent = document.getElementById("player").currentTime;
timeTotal = document.getElementById("player").duration;
percent = timeCurrent / timeTotal;
progressBarWidth = percent * 128;
document.getElementById("bar").style.width = progressBarWidth + "px";
}
</script>
</head>
<body>
<audio id="player" onTimeUpdate="progressBar()">
<source src="audio01.mp3" type="audio/mp3"></source>
</audio>
<img src="play.png" onClick="playAudio()" id="playbutton"/>
<img src="pause.png" onClick="pauseAudio()" id="pausebutton" style="display: none"/>
<div style="width: 128px; height: 7px; background-color: blue;" id="bar"></div>
</body>
</html>Mod-Edit: Code-Tags hinzugefügt - Beim nächsten Mal bitte dran denken (XraYSoLo)
Zuletzt bearbeitet von einem Moderator:
