Estoy seguro que la mayoría no conoce el termino pero esto no es nuevo, y bueno muchos de hecho han ingresado o escuchado sobre SoundCloud esta plataforma de streming muy popular y vistosa que implementa esta forma de representar y mostrar sus archivos de audio, pero no es la única, pues existe tambien HulkShare y ZippyShare que también implementan el WaveForm.
Bien una de las formas que se puede incorporar es mediante PHP, y el uso de LAME MP3 ENCODER, el cual lo utilizaremos para transformar nuestro audio de origen mp3, o cualquier otro, en .WAVE, el cual sera analizado por php para crear el waveform y convertirlo en una imagen.
Les dejo el código para que lo analicen y lo puedan probar en sus PC’s.
<?php // TIEMPO MAXIMO PARA EJECUTAR EL SCRIPT // ESTO DEPENDERA PRIMERAMENTE DEL TAMAÑO DEL ARCHIVO // TAMBIEN DE LA VELOCIDAD DEL SERVIDOR ini_set("max_execution_time", "30000"); // CANTIDAD DE DETALLES DEL WAVEFORM // A MAYOR NUMERO MENOS DETALLES // A MENOR NUMERO MAS DETALLES Y MAYOR TIEMPO DE PROCESO DEL SCRIPT define("DETAIL", 5); // DETALLES DE DISENO A IMPRIMIR EN EL WAVEFORM define("DEFAULT_WIDTH", 500); define("DEFAULT_HEIGHT", 100); define("DEFAULT_FOREGROUND", "#FF0000"); define("DEFAULT_BACKGROUND", "#FFFFFF"); /** * GENERAL FUNCTIONS */ function findValues($byte1, $byte2){ $byte1 = hexdec(bin2hex($byte1)); $byte2 = hexdec(bin2hex($byte2)); return ($byte1 + ($byte2*256)); } /** * Great function slightly modified as posted by Minux at * http://forums.clantemplates.com/showthread.php?t=133805 */ function html2rgb($input) { $input=($input[0]=="#")?substr($input, 1,6):substr($input, 0,6); return array( hexdec(substr($input, 0, 2)), hexdec(substr($input, 2, 2)), hexdec(substr($input, 4, 2)) ); } if (isset($_FILES["mp3"])) { /** * PROCESS THE FILE */ // temporary file name $tmpname = substr(md5(time()), 0, 10); // copy from temp upload directory to current copy($_FILES["mp3"]["tmp_name"], "{$tmpname}_o.mp3"); // support for stereo waveform? $stereo = isset($_POST["stereo"]) && $_POST["stereo"] == "on" ? true : false; // array of wavs that need to be processed $wavs_to_process = array(); /** * convert mp3 to wav using lame decoder * First, resample the original mp3 using as mono (-m m), 16 bit (-b 16), and 8 KHz (--resample 8) * Secondly, convert that resampled mp3 into a wav * We don't necessarily need high quality audio to produce a waveform, doing this process reduces the WAV * to it's simplest form and makes processing significantly faster */ if ($stereo) { // scale right channel down (a scale of 0 does not work) exec("lame {$tmpname}_o.mp3 --scale-r 0.1 -m m -S -f -b 16 --resample 8 {$tmpname}.mp3 && lame -S --decode {$tmpname}.mp3 {$tmpname}_l.wav"); // same as above, left channel exec("lame {$tmpname}_o.mp3 --scale-l 0.1 -m m -S -f -b 16 --resample 8 {$tmpname}.mp3 && lame -S --decode {$tmpname}.mp3 {$tmpname}_r.wav"); $wavs_to_process[] = "{$tmpname}_l.wav"; $wavs_to_process[] = "{$tmpname}_r.wav"; } else { exec("lame {$tmpname}_o.mp3 -m m -S -f -b 16 --resample 8 {$tmpname}.mp3 && lame -S --decode {$tmpname}.mp3 {$tmpname}.wav"); $wavs_to_process[] = "{$tmpname}.wav"; } // delete temporary files unlink("{$tmpname}_o.mp3"); //unlink("{$tmpname}.mp3"); // get user vars from form $width = isset($_POST["width"]) ? (int) $_POST["width"] : DEFAULT_WIDTH; $height = isset($_POST["height"]) ? (int) $_POST["height"] : DEFAULT_HEIGHT; $foreground = isset($_POST["foreground"]) ? $_POST["foreground"] : DEFAULT_FOREGROUND; $background = isset($_POST["background"]) ? $_POST["background"] : DEFAULT_BACKGROUND; $draw_flat = isset($_POST["flat"]) && $_POST["flat"] == "on" ? true : false; $img = false; // generate foreground color list($r, $g, $b) = html2rgb($foreground); // process each wav individually for($wav = 1; $wav <= sizeof($wavs_to_process); $wav++) { $filename = $wavs_to_process[$wav - 1]; /** * Below as posted by "zvoneM" on * http://forums.devshed.com/php-development-5/reading-16-bit-wav-file-318740.html * as findValues() defined above * Translated from Croation to English - July 11, 2011 */ $handle = fopen($filename, "r"); // wav file header retrieval $heading[] = fread($handle, 4); $heading[] = bin2hex(fread($handle, 4)); $heading[] = fread($handle, 4); $heading[] = fread($handle, 4); $heading[] = bin2hex(fread($handle, 4)); $heading[] = bin2hex(fread($handle, 2)); $heading[] = bin2hex(fread($handle, 2)); $heading[] = bin2hex(fread($handle, 4)); $heading[] = bin2hex(fread($handle, 4)); $heading[] = bin2hex(fread($handle, 2)); $heading[] = bin2hex(fread($handle, 2)); $heading[] = fread($handle, 4); $heading[] = bin2hex(fread($handle, 4)); // wav bitrate $peek = hexdec(substr($heading[10], 0, 2)); $byte = $peek / 8; // checking whether a mono or stereo wav $channel = hexdec(substr($heading[6], 0, 2)); $ratio = ($channel == 2 ? 40 : 80); // start putting together the initial canvas // $data_size = (size_of_file - header_bytes_read) / skipped_bytes + 1 $data_size = floor((filesize($filename) - 44) / ($ratio + $byte) + 1); $data_point = 0; // now that we have the data_size for a single channel (they both will be the same) // we can initialize our image canvas if (!$img) { // create original image width based on amount of detail // each waveform to be processed with be $height high, but will be condensed // and resized later (if specified) $img = imagecreatetruecolor($data_size / DETAIL, $height * sizeof($wavs_to_process)); // fill background of image if ($background == "") { // transparent background specified imagesavealpha($img, true); $transparentColor = imagecolorallocatealpha($img, 0, 0, 0, 127); imagefill($img, 0, 0, $transparentColor); } else { list($br, $bg, $bb) = html2rgb($background); imagefilledrectangle($img, 0, 0, (int) ($data_size / DETAIL), $height * sizeof($wavs_to_process), imagecolorallocate($img, $br, $bg, $bb)); } } while(!feof($handle) && $data_point < $data_size){ if ($data_point++ % DETAIL == 0) { $bytes = array(); // get number of bytes depending on bitrate for ($i = 0; $i < $byte; $i++) $bytes[$i] = fgetc($handle); switch($byte){ // get value for 8-bit wav case 1: $data = findValues($bytes[0], $bytes[1]); break; // get value for 16-bit wav case 2: if(ord($bytes[1]) & 128) $temp = 0; else $temp = 128; $temp = chr((ord($bytes[1]) & 127) + $temp); $data = floor(findValues($bytes[0], $temp) / 256); break; } // skip bytes for memory optimization fseek($handle, $ratio, SEEK_CUR); // draw this data point // relative value based on height of image being generated // data values can range between 0 and 255 $v = (int) ($data / 255 * $height); // don't print flat values on the canvas if not necessary if (!($v / $height == 0.5 && !$draw_flat)) // draw the line on the image using the $v value and centering it vertically on the canvas imageline( $img, // x1 (int) ($data_point / DETAIL), // y1: height of the image minus $v as a percentage of the height for the wave amplitude $height * $wav - $v, // x2 (int) ($data_point / DETAIL), // y2: same as y1, but from the bottom of the image $height * $wav - ($height - $v), imagecolorallocate($img, $r, $g, $b) ); } else { // skip this one due to lack of detail fseek($handle, $ratio + $byte, SEEK_CUR); } } // close and cleanup fclose($handle); // delete the processed wav file unlink($filename); } header("Content-Type: image/png"); // want it resized? if ($width) { // resample the image to the proportions defined in the form $rimg = imagecreatetruecolor($width, $height); // save alpha from original image imagesavealpha($rimg, true); imagealphablending($rimg, false); // copy to resized imagecopyresampled($rimg, $img, 0, 0, 0, 0, $width, $height, imagesx($img), imagesy($img)); imagepng($rimg); imagedestroy($rimg); } else { imagepng($img); } imagedestroy($img); } else { ?> <form method="post" action="<?php print $_SERVER["REQUEST_URI"]; ?>" enctype="multipart/form-data"> <p>MP3 File:<br /> <input type="file" name="mp3" /></p> <p>Image Width:<br /> <input type="text" name="width" value="<?php print DEFAULT_WIDTH; ?>" /></p> <p>Image Height:<br /> <input type="text" name="height" value="<?php print DEFAULT_HEIGHT; ?>" /></p> <p>Foreground Color: <small>(HEX/HTML color code)</small><br /> <input type="text" name="foreground" value="<?php print DEFAULT_FOREGROUND; ?>" /></p> <p>Background Color: (Leave blank for transparent background) <small>(HEX/HTML color code)</small><br /> <input type="text" name="background" value="<?php print DEFAULT_BACKGROUND; ?>" /></p> <p>Draw flat-line? <input type="checkbox" name="flat" /></p> <p>Stereo waveform? <input type="checkbox" name="stereo" /></p> <p><input type="submit" value="Generate Waveform" /></p> </form> <? } ?>
Tienen que Descargar Lame MP3 Encoder desde su pagina principal. Mencionar también que no es la única forma actualmente que se utiliza para crear un waveform, esta es una forma básica de como hacerlo, se puede implementar tanto en servidores Windows como Linux. Les dejo tambien un articulo para implementarlo en Reproductores Flash con ActionScript
Bien les dejo todos los archivos listos para descargar. Estaré Publicando otros post de como hacer con otras opciones.