Jump to content

Possible to put mp3 sounds in a field ?


pwired
 Share

Recommended Posts

Hi

Anything in processwire is a page and you can fill a field with text, image, or code,

so I was thinking: is it possible to fill a field with a mp3 file and use it anywhere on

your website ?

Usage:

A spoken info message (mp3) when a button is clicked.

A sound when a button is clicked.

Link to comment
Share on other sites

Thanks Radek, looks good on that site.

How can you make the player invisible ?

I think this depends on your needs. If you want use some button and hide it with css/js or if you dont need playlist (example) or other controls maybe is better use some simplest plugin like Ion.Sound (not tested) .

  • Like 1
Link to comment
Share on other sites

Or if you dont need support for old browsers you can try something like this:

This one have redirection after play.


HTML
 

<audio id="audio" hidden>
    <source src="./sound/sound.mp3" type="audio/mpeg">
</audio>

<div id="menu">
    <li>
        <a href="http://www.google.com">Click to play...</a>
    </li>
</div>
 

jQuery
 

var target;

function checkAudio() {
    if($("#audio")[0].paused) {
        window.location.href  = target;
    } else {
        setTimeout(checkAudio, 1000);
    }
}

$('#menu li a').click(function(e) {
    e.preventDefault();

    target = $(this).attr('href');

    console.log("Let's play");

    var sound = $("#audio");
    sound.get(0).play();

    setTimeout(checkAudio, 1000);
});
 
  • Like 1
Link to comment
Share on other sites

I don't want to meshup (is that a word ?) with the great post of Radek.

But I have good experience with mediaElement.js to use audio & video.

Yes, I used media elephants on my main site http://www.dancingbear.co.uk

Because I was using a lot of files and needed ogg, mps and zip download, what I did is just scribble out a bit of php to expode the contents of a textarea where I listed the tracks needed for a particular page. So, I uploaded tons of files, then listed the file names without endings in the text area et voila - one great big music page

http://www.dancingbear.co.uk/music/individual-jingles/

Boring as hell if you are not into advertising, however.... :)

Link to comment
Share on other sites

Just for interest, this is what I did:

I created a textarea field called jingles_upbeat (as an example) and then exploded it by line and then by comma:

<?php  
$players = explode("\n", $page->jingles_upbeat);

    foreach($players as $player){

        $player = explode(',', $player);
        $count++;
 ?>
 
ignoring the modal bit, I then ran out the html within the loop using the <audio> element followed by the <source> element that Media Elements looks for:
 
    <audio id="player2" controls="controls" style="width:350px;">
    <source id="mp3_src" src="/site/assets/audio/single-jingles/<?php echo $player[0]; ?>.mp3" type="audio/mp3">
    <source id="ogg_src" src="/site/assets/audio/single-jingles/<?php echo $player[0]; ?>.ogg" type="audio/ogg">
    </audio>

<?php } ?>
 
 
In the above array, $player[0] is the file name without an extension, $player[1] is the title and $player[2] is a short description, which can be used anyway you want.  They looked like this in the field:
 
RCCoppins-30-full-with-front,RC Coppin,Kitchen Tops
Elmers-full,Elmers- Hardware Store
Concorde-full,Concorde,Tyres & Exhausts
 
And that was that - very easy.
Link to comment
Share on other sites

  • 1 month later...

I have a repeater with mp3s, and I am using the following code to get the path to the mp3.

foreach ($settings->music as $song) {
   echo "<audio src='$song->url'></audio>";
}

but the path returned looks like this:

 /processwire/repeaters/for-field-157/for-page-1355/1396614455-2945-1/

I am not getting the file ending in .mp3

What am I doing wrong?

Link to comment
Share on other sites

 I didn't reference the field. I changed the code to this

foreach ($settings->music as $piece) {
  echo "<audio src='$piece->song'></audio>";
}

and now I am getting the filename. But I need the path also. If I write $piece->song->path, the '->path' part is written to the src also.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...