Possible to put mp3 sounds in a field ?

[pwired]

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.

[adrian]

http://modules.processwire.com/modules/audio-mp3/

and also:

http://modules.processwire.com/modules/local-audio-files/

[pwired]

Thanks adrian, (shame on me that it's already there as a module)

So I only have to make the player invisible and keep the sound audible.

[Radek]

Hi, its possible. I made file field as mp3 storage with player this way. It is used here.

[kongondo]

Yes...an mp3 is just another filetype to the browser just like .pdf, .doc, .zip, .exe.....It just needs to be told what to do with it

[pwired]

Thanks Radek, looks good on that site.

How can you make the player invisible ?

[Radek]

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) .

[Radek]

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);
});
 

[pwired]

Thanks Radek, your code examples will give me something to work on.

[Martijn Geerts]

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.

[pwired]

(mess up) Thanks Martijn. With all this I will certainly find out to make clickable buttons with sounds. (without the player)

Can't wait until the week-end

[Radek]

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.

MediaElement.js looks great, i will test it on project with some video files.

[Joss]

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....

[Martijn Geerts]

Ha huge elephant list there. Nice modal drop down.

[Joss]

OH, you can blame Bootstrap for the modal.

[Joss]

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.

[alexpi]

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?

[Macrura]

what are the field names in your repeater

[alexpi]

The repeater is called 'music' and the repeater fields 'song'.

[alexpi]

 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.

[adrian]

You are looking for:

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

There is no "path" for a single file - take a look in the cheatsheet.