I came across this nicely designed audio player on CodePen, put together by Michael Zhigulin It uses the waves.js click effect library...
Mod rewrite in 10 minutesAshley
Mod rewrite is the best tool to rewrite those long and complicated urls. So what do you need to use mod_rewrite? The only thing you need to get started is make sure that the mod_rewrite module is installed in your Apache server. If your not sure how to find out fear not, copy the code below (make sure you put it between php delimiters) save it and upload it to your server and visit the page. If it isnâ€™t there, youâ€™ll have to contact your hosting company and ask them to add it to the Apache configuration.
Assuming the mod_rewrite module is installed, then we’re good to crack on with the next stage. Copy the code below save it as your .htaccess file and upload it to your servers root directory.
RewriteEngine On #This is the bit that does the rewrite RewriteRule ^contact/$ /pages/contact.html [NC,L]
So what’s the code doing?
Lets take a look at the code. So we’ve started by telling apache to turn on the rewrite engine, this now allows us to perform url rewrites now. Simply put, apache recognises the url structure and redirects it to the second part of the rewrite rule. Each time you perform a rewrite rule you must start by writing ‘RewriteRule’ followed by the url structure.
To make the code above work, upload the above .htaccess file and simply create a new html document and add some dummy text. Save it in the folder ‘pages’ and upload it to your server root, for example: www.papermashup.com/pages/contact.html.
if you now visit your site url /contact/ for example www.papermashup.com/contact/ you should see the html file in the folder ‘pages’.
So how can you pass variables through the url? Simple. Here’s an example below. The url we are writing to is as follows.
you can see that after ‘user’ in the code below we can expect either letters between a-z or numbers from 0-9 and that after ‘blog’ we are only looking for a number from 0-9. So what if you have more than 2 Get variables in your url? for each variable continue the structure as shown below but increment the values $1, $2, $3, $4 and so on within your url structure.
#This is the bit that does the rewrite RewriteRule ^user/([a-z0-9]+)/blog/([0-9]+)$ pages/blog.php?id=$1&blogid=$2 [NC,L]
Rewrite rule Flags
You can see that we are using [NC,L] at the end of the rule, ‘NC’ means that it is not case sensitive so there is no difference between A-Z and a-z. ‘L’. Use this flag to prevent the currently rewritten URL from being rewritten further by following rules.
NS Use the following rule for whenever you prefix URLs with for example, CGI-scripts to force them to be processed by the CGI-script.
NE This flag keeps mod_rewrite from applying the usual URI escaping rules to the result of a rewrite. Ordinarily, special characters (such as ‘%’, ‘$’, ‘;’, and so on) will be escaped into their hexcode equivalents (‘%25’, ‘%24’, and ‘%3B’, respectively); this flag prevents this from being done. This allows percent symbols to appear in the output.
There are more flags which can be seen here
This is a basic introduction to Mod_rewrite and the possibilities are endless when it comes to its use. If you have any questions please leave them below and i’d be more than happy to answer them.