MP3 in Wordpress
lima-city → Forum → Die eigene Homepage → Homepage Allgemein
bild
code
dank
effekt
einzelnen quadrate
ersteinmal
first
http
image
jemand
legen
page
part
portfolio
post
probieren
repertoire
text
url
video
-
Die ambitionierten Sänger des Chores, dem ich eng verbunden bin, wollen, dass ihre WordPress Website aufgepeppt wird. Es geht darum, auf der Startseite die Chormitglieder vorzustellen. Zu jedem Mitglied gibt es zwei Bilder, ein normal, das 2. wird bei mouseover angezeigt. Gleichzeitig soll bei mouseover ein Player angezeigt werden bei dem man eine Soundwiedergabe starten kann.
Ich will das Fahrrad nicht vollkommen neu erfinden und habe mir gedacht, dass ich auf einem bereits existierenden Plugin aufbaue. Allerdings werden mir beim Durchsuchen der Plugins in Wordpress knapp 200 Plugins angeboten, die alle was mit MP3-Player zu tun haben. Daher meine Frage, ob jemand so etwas ähnliches schon mal gemacht hat und ob es eine Empfehlung gibt, welches Plugin sich möglichst gut für mein Vorhaben eignet. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Vielleicht wäre das eine gute Lösung für Dich: http://wpfaq.org/site/sound-effects/.
Achieving the effect is really easy. All you have to do is upload an mp3 file with the sound effect to your server, get the URL then use this code from www.javascriptkit.com which is made out of two parts. The first part is used to define the sound to play and the second part is used to define how or when to play the sound. Whereas the first part of the code is added only once per page or post the second is added as many times as you want to have a sound playing on your page.
First part of the code:
<script> var html5_audiotypes={ "mp3": "audio/mpeg", "mp4": "audio/mp4", "ogg": "audio/ogg", "wav": "audio/wav" } function createsoundbite(sound){ var html5audio=document.createElement('audio') if (html5audio.canPlayType){ //check support for HTML5 audio for (var i=0; i<arguments.length; i++){ var sourceel=document.createElement('source') sourceel.setAttribute('src', arguments[i]) if (arguments[i].match(/\.(\w+)$/i)) sourceel.setAttribute('type', html5_audiotypes[RegExp.$1]) html5audio.appendChild(sourceel) } html5audio.load() html5audio.playclip=function(){ html5audio.pause() html5audio.currentTime=0 html5audio.play() } return html5audio } else{ return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}} } } var mouseoversound1=createsoundbite("sound.ogg", "sound.mp3") var clicksound1=createsoundbite("click_sound.ogg", "click_sound.mp3") </script>
Replace sound.ogg and sound.mp3 and/or click_sound.ogg and click_sound.mp3 with the URL to your sound effect. Once you're done editing paste the code into the page or post you want to add the sound effect to.
Second part of the code: Choose the one which fits your needs...
Code for playing a sound when pointing the mouse over some text
<a nohref onmouseover="mouseoversound1.playclip()">Your text</a>
Code for playing a sound when pointing the mouse over a link
<a href="URL to the page" target="_blank" onmouseover="mouseoversound1.playclip()">Your text</a>
Code for playing a sound when pointing the mouse over an image
<a nohref onmouseover="mouseoversound1.playclip()"><img src="URL to the image" style="width:200px;height:80px;border:0px;"></a>
Code for playing a sound when pointing the mouse over an image-link
<a href="URL to the page" target="_blank" onmouseover="mouseoversound1.playclip()"><img src="URL to the image" style="width:200px;height:80px;border:0px;"></a>
Code for playing a sound when clicking on some text
<a nohref onclick="clicksound1.playclip()">Your text</a>
Code for playing a sound when clicking on a link
<a href="URL to the page" target="_blank" onclick="clicksound1.playclip()">Your text</a>
Code for playing a sound when clicking on an image
<a nohref onclick="clicksound1.playclip()"><img src="URL to the image" style="width:200px;height:80px;border:0px;"></a>
Code for playing a sound when clicking on an image-link
<a href="URL to the page" target="_blank" onclick="clicksound1.playclip()"><img src="URL to the image" style="width:200px;height:80px;border:0px;"></a>
Paste the second part of the code into your page or post where you want the sound effect to appear. -
Danke ersteinmal für den Link.
Ich habe inzwischen herausbekommen, woher die Chorleute die Idee haben. Hier
http://mightymondays.de/#pg-18-4
unter Repertoire wird so etwas ansatzweise gezeigt. Diese einzelnen Quadrate und dem mouseover-Effekt mit dem Text drauf werden vermutlich über ein spezielles Plugin erzeugt. Wenn ich die habe, könnte ich probieren, einen MP3-Player darauf zu legen.
Eventuell weiß ja jemand, was das für ein Plugin ist -
mein-wunschname schrieb:
Danke ersteinmal für den Link.
Ich habe inzwischen herausbekommen, woher die Chorleute die Idee haben. Hier
http://mightymondays.de/#pg-18-4
unter Repertoire wird so etwas ansatzweise gezeigt. Diese einzelnen Quadrate und dem mouseover-Effekt mit dem Text drauf werden vermutlich über ein spezielles Plugin erzeugt. Wenn ich die habe, könnte ich probieren, einen MP3-Player darauf zu legen.
Eventuell weiß ja jemand, was das für ein Plugin ist
Bei mir in Chrome funktioniert das schon mal nicht :/
Schwierig kann das aber nicht sein, mit onHover nen js zu starten was den Player an macht. -
mein-wunschname schrieb: Diese einzelnen Quadrate und dem mouseover-Effekt mit dem Text drauf werden vermutlich über ein spezielles Plugin erzeugt. Wenn ich die habe, könnte ich probieren, einen MP3-Player darauf zu legen. Eventuell weiß ja jemand, was das für ein Plugin ist
In einigen Templates existieren Widgets mit on Mouse over Effekten und Kacheldarstellung. Aber möglicherweise ist es auch sowas wie hier: https://www.webtimiser.de/wordpress-portfolio-plugins-im-test/ beschrieben. Keine Ahnung ob es damit möglich ist auch Soundaktionen auszulösen. Zumindest bei nimble https://wordpress.org/plugins/nimble-portfolio/ scheint einiges zu gehen
Beitrag zuletzt geändert: 20.1.2018 16:37:58 von graukopf -
Die Sache mit den Portfolio-Plugins sieht interessant aus. Das werde ich mir einmal näher ansehen.
-
Ich hab da einen anderen Ansatz für dich.
Du könntest deine Lieder quasi als Video mit einem Bild von den Chormitgliedern versehen und das auf Youtube hochladen. Für Wordpress gibts da ein Plugin namens WP Youtube Lyte Das bindet dir die Videos samt Player in dein Wordpress ein.
Sieht dann so aus:
https://www.medienspürnase.de/amberian-dawn-magic-forrest/
Im Backend kannst du dann noch definieren welche Qualität angezeigt werden soll, die Position und Größe des Players. -
Ja, an Youtube habe ich auch schon gedacht, aber wenn Song oder Titelbild ausgetauscht werden sollen, dann fängt wieder jemand an, Videos zu basteln. Es geht immerhin um 25 Bilder/Song. Außerdem gibt es auch noch organisatorische Probleme (will niemand auf seinem Account haben).
Ich habe die Angelegenheit jetzt weitgehend "zu Fuss" gelöst. Man kann sich das hier auf einer Testwebsite ansehen:https://salto.9f8.de/(unter Repertoire). Wer Lust hat kann ja mal draufsehen. Der Wechsel bei :hover soll noch mit einer transition gemacht werden, eventuell auch mit css-Filtern.
Eine Angelegenheit konnte ich aber nicht lösen. Eigentlich soll jedes 2.Quadrat eine andere Einfärbung haben. Die einzelnen Quadrate haben div, der so aussieht:
<div class="mediabackground">
Jetzt habe ich gedacht, dass ich mit
.mediabackground:nth-child(2n+1)
jedes 2. Element ansprechend kann und anders einfärben kann. Klappt aber nicht, es werden immer alle divs mit der Klasse mediabackground geändert.
Möglicherweise hat dazu jemand einen Tipp. Auch sonst bin ich für Hinweise dankbar.
Beitrag zuletzt geändert: 22.1.2018 16:16:47 von mein-wunschname -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
