Wikizone - Benutzerbeiträge [de]

JavaScript - HTML5 Audio

2013-02-17T14:22:58Z

87.180.120.118: /* Links */

Quelle: http://9elements.com/html5demos/audio/ (2013-2)

== HTML Audio Player ==
<pre>
<audio controls autobuffer>
<source src="thankyou.ogg" />
<source src="thankyou.mp3" />

</audio>
</pre>

== Steuerung eines Audio Elements mit JavaScript ==
<pre>
// wir definieren eine Variable welche in allen Closures gilt
var audioElement;

// start the audio element
$('#start-audio-button').click(function() {
// Audioelement erstellen
audioElement = new Audio();

// im DOM einfügen, sonst wird es nicht abgespielt
document.body.appendChild(audioElement);

// herausfinden welcher Medientyp abgespielt werden kann
var canPlayType = audioElement.canPlayType("audio/ogg");
if(canPlayType.match(/maybe|probably/i)) {
audioElement.src = 'thankyou.ogg';
} else {
audioElement.src = 'thankyou.mp3';
}

// erst abspielen wenn genug vom mp3 geladen wurde
audioElement.addEventListener('canplay', function() {
audioElement.play();
}, false);

// Funktionen erst einblenden
$('#realtime-functions').animate({ opacity : '1.0'}, 400);

// jetzt die anderen Events binden
// pause
$('#pause-button').click(function() {
audioElement.pause();
return false;
});

// play
$('#play-button').click(function() {
audioElement.play();
return false;
});

// zufällige Lautstärke
$('#change-volume-button').click(function() {
var volume = Math.random(); // Wert zwischen 0..1
audioElement.volume = volume;
$('#volume').text(Math.floor(volume*100));
return false;
});

return false;
});

</pre>

== Abfrage der Fähigkeiten des Userbrowsers ==
<pre>

try {
myAudioObj = new Audio();

audioObjSupport = !!(myAudioObj.canPlayType);
basicAudioSupport = !!(!audioObjSupport ? myAudioObj.play : false);

if (myAudio.canPlayType) {
// Currently canPlayType(type) returns: "no", "maybe" or "probably"
canPlayOgg = ("no" != myAudio.canPlayType("audio/ogg")) && ("" != myAudio.canPlayType("audio/ogg"));
canPlayMp3 = ("no" != myAudio.canPlayType("audio/mpeg")) && ("" != myAudio.canPlayType("audio/mpeg"));
}
} catch (e) {
audioObjSupport = false;
basicAudioSupport = false;
}
</pre>

== Audiodateien in Phonegap / Cordova ==
http://simonmacdonald.blogspot.de/2011/05/using-media-class-in-phonegap.html

[[Audio in PhoneGap / Cordova]]

== Links ==

http://blogs.msdn.com/b/ie/archive/2011/05/13/unlocking-the-power-of-html5-lt-audio-gt.aspx

Synchronisation, Preloading, Multiple Files

http://msdn.microsoft.com/en-us/library/ie/gg589489%28v=vs.85%29.aspx

http://html5doctor.com/html5-audio-the-state-of-play/

http://www.schillmania.com/projects/soundmanager2/

http://www.jquery4u.com/media/10-jquery-audio/

JavaScript - HTML5 Audio

2013-02-17T14:21:29Z

87.180.120.118: /* Links */

Quelle: http://9elements.com/html5demos/audio/ (2013-2)

== HTML Audio Player ==
<pre>
<audio controls autobuffer>
<source src="thankyou.ogg" />
<source src="thankyou.mp3" />

</audio>
</pre>

== Steuerung eines Audio Elements mit JavaScript ==
<pre>
// wir definieren eine Variable welche in allen Closures gilt
var audioElement;

// start the audio element
$('#start-audio-button').click(function() {
// Audioelement erstellen
audioElement = new Audio();

// im DOM einfügen, sonst wird es nicht abgespielt
document.body.appendChild(audioElement);

// herausfinden welcher Medientyp abgespielt werden kann
var canPlayType = audioElement.canPlayType("audio/ogg");
if(canPlayType.match(/maybe|probably/i)) {
audioElement.src = 'thankyou.ogg';
} else {
audioElement.src = 'thankyou.mp3';
}

// erst abspielen wenn genug vom mp3 geladen wurde
audioElement.addEventListener('canplay', function() {
audioElement.play();
}, false);

// Funktionen erst einblenden
$('#realtime-functions').animate({ opacity : '1.0'}, 400);

// jetzt die anderen Events binden
// pause
$('#pause-button').click(function() {
audioElement.pause();
return false;
});

// play
$('#play-button').click(function() {
audioElement.play();
return false;
});

// zufällige Lautstärke
$('#change-volume-button').click(function() {
var volume = Math.random(); // Wert zwischen 0..1
audioElement.volume = volume;
$('#volume').text(Math.floor(volume*100));
return false;
});

return false;
});

</pre>

== Abfrage der Fähigkeiten des Userbrowsers ==
<pre>

try {
myAudioObj = new Audio();

audioObjSupport = !!(myAudioObj.canPlayType);
basicAudioSupport = !!(!audioObjSupport ? myAudioObj.play : false);

if (myAudio.canPlayType) {
// Currently canPlayType(type) returns: "no", "maybe" or "probably"
canPlayOgg = ("no" != myAudio.canPlayType("audio/ogg")) && ("" != myAudio.canPlayType("audio/ogg"));
canPlayMp3 = ("no" != myAudio.canPlayType("audio/mpeg")) && ("" != myAudio.canPlayType("audio/mpeg"));
}
} catch (e) {
audioObjSupport = false;
basicAudioSupport = false;
}
</pre>

== Audiodateien in Phonegap / Cordova ==
http://simonmacdonald.blogspot.de/2011/05/using-media-class-in-phonegap.html

[[Audio in PhoneGap / Cordova]]

== Links ==

http://blogs.msdn.com/b/ie/archive/2011/05/13/unlocking-the-power-of-html5-lt-audio-gt.aspx

Synchronisation, Preloading, Multiple Files

http://html5doctor.com/html5-audio-the-state-of-play/

http://www.schillmania.com/projects/soundmanager2/

http://www.jquery4u.com/media/10-jquery-audio/

JavaScript - HTML5 Audio

2013-02-17T14:17:40Z

87.180.120.118: /* Steuerung eines Audio Elements mit JavaScript */

JavaScript - HTML5 Audio

2013-02-17T14:10:31Z

87.180.120.118: /* Steuerung eines Audio Elements mit JavaScript */

Quelle: http://9elements.com/html5demos/audio/ (2013-2)

== HTML Audio Player ==
<pre>
<audio controls autobuffer>
<source src="thankyou.ogg" />
<source src="thankyou.mp3" />

</audio>
</pre>

== Steuerung eines Audio Elements mit JavaScript ==
<pre>
// wir definieren eine Variable welche in allen Closures gilt
var audioElement;

// start the audio element
$('#start-audio-button').click(function() {
// Audioelement erstellen
audioElement = new Audio();

// im DOM einfügen, sonst wird es nicht abgespielt
document.body.appendChild(audioElement);

// herausfinden welcher Medientyp abgespielt werden kann
var canPlayType = audioElement.canPlayType("audio/ogg");
if(canPlayType.match(/maybe|probably/i)) {
audioElement.src = 'thankyou.ogg';
} else {
audioElement.src = 'thankyou.mp3';
}

// erst abspielen wenn genug vom mp3 geladen wurde
audioElement.addEventListener('canplay', function() {
audioElement.play();
}, false);

// Funktionen erst einblenden
$('#realtime-functions').animate({ opacity : '1.0'}, 400);

// jetzt die anderen Events binden
// pause
$('#pause-button').click(function() {
audioElement.pause();
return false;
});

// play
$('#play-button').click(function() {
audioElement.play();
return false;
});

// zufällige Lautstärke
$('#change-volume-button').click(function() {
var volume = Math.random(); // Wert zwischen 0..1
audioElement.volume = volume;
$('#volume').text(Math.floor(volume*100));
return false;
});

return false;
});

</pre>

== Abfrage der Fähigkeiten des Userbrowsers ==
<pre>

try {
myAudioObj = new Audio("");

audioObjSupport = !!(myAudioObj.canPlayType);
basicAudioSupport = !!(!audioObjSupport ? myAudioObj.play : false);

if (myAudio.canPlayType) {
// Currently canPlayType(type) returns: "no", "maybe" or "probably"
canPlayOgg = ("no" != myAudio.canPlayType("audio/ogg")) && ("" != myAudio.canPlayType("audio/ogg"));
canPlayMp3 = ("no" != myAudio.canPlayType("audio/mpeg")) && ("" != myAudio.canPlayType("audio/mpeg"));
}
} catch (e) {
audioObjSupport = false;
basicAudioSupport = false;
}
</pre>

== Audiodateien in Phonegap / Cordova ==
http://simonmacdonald.blogspot.de/2011/05/using-media-class-in-phonegap.html

[[Audio in PhoneGap / Cordova]]

== Links ==

http://blogs.msdn.com/b/ie/archive/2011/05/13/unlocking-the-power-of-html5-lt-audio-gt.aspx

Synchronisation, Preloading, Multiple Files

Audio in PhoneGap / Cordova

2013-02-17T12:30:33Z

87.180.120.118:

HTML5 Audio Tag und JavaScript

siehe auch: http://simonmacdonald.blogspot.de/2011/05/using-media-class-in-phonegap.html

Auf die Pfade achten:

Auf Android geht es auf 3 verschiedene Arten.

"android_asset" App Verzeichnis.
myMedia = new Media("/android_asset/www/test.mp3");

Geräteverzeichnis z.B. in "/sdcard/test.mp3"
myMedia = new Media("test.mp3");

Man benötigt keinen "/sdcard/" Teil, weil Android annimmt, das es auf der sd karte sein muß. Könnte sich u.Umständen ändern.

3. über URL:
myMedia = new Media("http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3");

Beispiel:
<a href="#" onclick="playAudio()"><img id="play" src="images/play.png" /></a>

function playAudio() {
myMedia.play();
}

Siehe auch:
[[JavaScript - HTML5 Audio]]

JavaScript - HTML5 Audio

2013-02-17T12:29:59Z

87.180.120.118: /* Abfrage der Fähigkeiten des Userbrowsers */

Quelle: http://9elements.com/html5demos/audio/ (2013-2)

== HTML Audio Player ==
<pre>
<audio controls autobuffer>
<source src="thankyou.ogg" />
<source src="thankyou.mp3" />

</audio>
</pre>

== Steuerung eines Audio Elements mit JavaScript ==
<pre>
// wir definieren eine Variable welche in allen Closures gilt
var audioElement;

// start the audio element
$('#start-audio-button').click(function() {
// Audioelement erstellen
audioElement = new Audio("");

// im DOM einfügen, sonst wird es nicht abgespielt
document.body.appendChild(audioElement);

// herausfinden welcher Medientyp abgespielt werden kann
var canPlayType = audioElement.canPlayType("audio/ogg");
if(canPlayType.match(/maybe|probably/i)) {
audioElement.src = 'thankyou.ogg';
} else {
audioElement.src = 'thankyou.mp3';
}

// erst abspielen wenn genug vom mp3 geladen wurde
audioElement.addEventListener('canplay', function() {
audioElement.play();
}, false);

// Funktionen erst einblenden
$('#realtime-functions').animate({ opacity : '1.0'}, 400);

// jetzt die anderen Events binden
// pause
$('#pause-button').click(function() {
audioElement.pause();
return false;
});

// play
$('#play-button').click(function() {
audioElement.play();
return false;
});

// zufällige Lautstärke
$('#change-volume-button').click(function() {
var volume = Math.random(); // Wert zwischen 0..1
audioElement.volume = volume;
$('#volume').text(Math.floor(volume*100));
return false;
});

return false;
});

</pre>

== Abfrage der Fähigkeiten des Userbrowsers ==
<pre>

try {
myAudioObj = new Audio("");

audioObjSupport = !!(myAudioObj.canPlayType);
basicAudioSupport = !!(!audioObjSupport ? myAudioObj.play : false);

if (myAudio.canPlayType) {
// Currently canPlayType(type) returns: "no", "maybe" or "probably"
canPlayOgg = ("no" != myAudio.canPlayType("audio/ogg")) && ("" != myAudio.canPlayType("audio/ogg"));
canPlayMp3 = ("no" != myAudio.canPlayType("audio/mpeg")) && ("" != myAudio.canPlayType("audio/mpeg"));
}
} catch (e) {
audioObjSupport = false;
basicAudioSupport = false;
}
</pre>

== Audiodateien in Phonegap / Cordova ==
http://simonmacdonald.blogspot.de/2011/05/using-media-class-in-phonegap.html

[[Audio in PhoneGap / Cordova]]

== Links ==

http://blogs.msdn.com/b/ie/archive/2011/05/13/unlocking-the-power-of-html5-lt-audio-gt.aspx

Synchronisation, Preloading, Multiple Files

Audio in PhoneGap / Cordova

2013-02-17T12:28:33Z

87.180.120.118: Die Seite wurde neu angelegt: „HTML5 Audio Tag und JavaScript siehe auch: http://simonmacdonald.blogspot.de/2011/05/using-media-class-in-phonegap.html Auf die Pfade achten: Auf Android geht …“

App Entwicklung mit PhoneGap

2013-02-17T12:21:54Z

87.180.120.118: /* Links */

== PhoneGap = Apache Cordova ==
http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a-name/

PhoneGap wurde Ende 2012 von Adobe übernommen. Die Code Basis wurde der Community übergeben und stehe jetzt als Apache Cordova unter der Apache Lizenz. PhoneGap bleibt als spezielle Adobe Distribution erhalten. Im Moment ist die Codebasis identisch (Anfang 2013). Die Basis für PhoneGap wird vermutlich auch Cordova bleiben.

Über die Zeit werden bei PhoneGap wahrscheinlich einige Plugins und Komponenten dazukommen um die Verknüpfung mit anderen Adobe Tools zu realisieren. PhoneGap wird aber OpenSource und kostenlos bleiben.

== Links ==
http://phonegap.com/developer/

== Audio in Phonegap / Cordova ==
[[Audio in PhoneGap / Cordova]]

== Entwicklungsumgebungen ==
Es gibt Compiler in der Cloud mit denen man arbeiten kann. Oder man nutzt die nativen Entwicklungsumgebungen der entsprechenden Plattformen.

=== Cloud Entwicklung ===
Todo

=== Android ===
[[Android App Entwicklung mit Cordova / PhoneGap]]

Android App Entwicklung mit Cordova / PhoneGap

2013-02-17T11:59:36Z

87.180.120.118: /* Probleme beheben */

== Begriffe ==
ADT = Android Developer Tools

== Benötigte Komponenten und Installation ==
Am einfachsten mit dem Komplettpaket:

http://developer.android.com/sdk/index.html

Enthält:

* Eclipse + ADT plugin
* Android SDK Tools
* Android Platform-tools
* The latest Android platform
* The latest Android system image for the emulator

=== Installation der benötigten Werkzeuge ===

Download und Entpacken von obigem Link:
adt-bundle-<os_platform>.zip

Kopieren des Ordners z.B. userverzeichnis/Development/. Darin enthalten ist das Android ''SDK'' und ''Eclipse''

Jetzt haben wir eine Android Entwicklungsumgebung.

==== PATH Variable für das Android SDK setzen ====
Wir öffnen die bash_profile Datei (wenn Sie nicht vorhanden ist wird Sie erzeugt.
touch ~/.bash_profile; open ~/.bash_profile
Jetzt können wir den Pfad zum Android SDK setzen und die Datei abspeichern. So wird bei jedem Terminal Aufruf der Pfad gesetzt. Man muß das also später nicht mehr machen.

export PATH=${PATH}:/Users/username/Development/adt-bundle-mac-x86_64/sdk/platform-tools:/Users/username/Development/android-sdk-macosx/sdk/tools

Manche User berichten von Fehlern im create Skript bei obiger Konfiguration und wenn die Dateien in /Development liegen (also nicht im Userverzeichnis). Bei mir hat es geholfen die Android und Cordova Tools im Userverzeichnis unterzubringen und die Pfade etwas anders ui setzen. Was genau die Ursache war habe ich nicht überprüft. Jedenfalls hat folgende Konfiguration des Pfades (und einrichten der Ordnerstruktur) funktioniert:
export PATH=/Users/schlegel/Development/adt-bundle-mac-x86_64/sdk/platform-tools:/Users/schlegel/Development/adt-bundle-mac-x86_64/sdk/tools:$PATH

Datei abspeichern und ausführen.

source ~/.bash_profile

== Projekt beginnen Old School bis 2.0.0 ==
DEPRECATED

In höheren Versionen gibt es kein cordova.jar mehr und ein paar Veränderungen in der Struktur. Es werden die Command Line Tools empfohlen s.u.

* '''Android Projekt''' definieren
* '''Cordova Bibliotheken''' importieren
* Start-'''Java-Datei''' für PhoneGap bestimmen
* Grundklasse modifizieren, um DroidGap zu erweitern.
* setContentView ändern, damit die URL Ihres HTML-basierten Home-Bildschirms, der auch manuell erstellt wird, geladen wird.
=== Android Projekt anlegen ===
File > New Android Application Project

Create new project in workspace
* new blank activity (Main Activity)

=== PhoneGap integrieren ===
==== Ordnerstruktur anlegen ====
Wir benötigen im Android Projekt folgende Ordner für PhoneGap:
assets/www
libs
Der HTML Code und das JavaScript für PhoneGap wird später in ''assets/www'' landen.
==== PhoneGap Komponenten kopieren ====
Aus der PhoneGap / Cordova Distribution den Android Ordner suchen und folgende Dateien ins Projekt kopieren:

cordova-1.5.0.js > assets/www
cordova-1.5.0.jar > libs/
xml directory > res/

== Projekt mit dem Cordova Create Script beginnen (Mac OS)==
=== Cordova Startcode erzeugen ===
http://docs.phonegap.com/en/2.1.0/guide_command-line_index.md.html#Command-Line%20Usage_android

In der Distribution gibt es ein create Skript unter
cordova-android/bin/create

zum Ausführen werden als Parameter mitgegeben:
* Path to your new Cordova Android project
* Package name, following reverse-domain style convention
* Main Activity name

'''Beispiele'''

/path/to/cordova-android/bin/create /path/to/my_new_cordova_project com.example.cordova_project_name CordovaProjectName

/Users/schlegel/Development//cordova-2.4.0/cordova-android/bin/create /Users/schlegel/Development/workspace/helloCordova de.webmynet.helloCordova helloCordova

=== Startcode in Eclipse integrieren ===
http://iphonedevlog.wordpress.com/2012/11/11/cordova-2-2-android-app-creation-in-mountain-lion-with-eclipse-from-install-to-google-play/

Der vom creat Skript erzeugte Code kann in Eclipse mit
File > New > Project...
Importiert werden. Dazu muß man im Auswahlfeld Import from Existing Code (genauer Wortlaut variiert) das Projekt importieren.

=== Probleme beheben ===
==== Fehler beim Create Skript ====
An unexpected error occurred: ANDROID_BIN="${ANDROID_BIN:=$( which android )}" exited with 1

Das Problem liegt oft an fehlenden Konstanten (hier ANDROID_BIN) und dies liegt wiederum oft an falsch gesetzter PATH Variable. Eventuell auch mal Android Tools und Cordova innerhalb des Userverzeichnisses anlegen. Scheinbar hat auch schon geholfen die PATH Variable anders zu setzen (s.o.)

==== Eclipse zeigt Fehler beim Kompilieren des Beispiel Projekts ====
* Mit rechts auf das Projekt klicken Properties > Android > Neueste Android API auswählen
* Project > Clean...

==== Eclipse logcat - SQLite Log ====
error opening file...
error log sqlite failed to load from /cachedGeoposition.db

The WebView component used by PhoneGap tries to load that DB file but it is only actually used by the Android Browser. You are safe to ignore it.