kostenloser Webspace werbefrei: lima-city


MP3 in Wordpress

lima-cityForumDie eigene HomepageHomepage Allgemein

  1. Autor dieses Themas

    mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    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.
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. invalidenturm

    Kostenloser Webspace von invalidenturm

    invalidenturm hat kostenlosen Webspace.

    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.
  4. Autor dieses Themas

    mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    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
  5. h***********r

    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.
  6. 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 :wink:


    Beitrag zuletzt geändert: 20.1.2018 16:37:58 von graukopf
  7. Autor dieses Themas

    mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    Die Sache mit den Portfolio-Plugins sieht interessant aus. Das werde ich mir einmal näher ansehen.
  8. kalinawalsjakoff

    Kostenloser Webspace von kalinawalsjakoff

    kalinawalsjakoff hat kostenlosen Webspace.

    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.
  9. Autor dieses Themas

    mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    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
  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!