Audio Shortcode

function song_menu_main($atts) {
        extract(shortcode_atts(array(
                'title' => '',
                'file' => '',
                'album' => '#',
                'songbook-page' => '#'
        ), $atts));
        $audio = '[audio mp3="https://outofthedepths.net/wp-content/uploads/2015/01/' .
                 addslashes($file) .
                 '.mp3" ogg="https://outofthedepths.net/wp-content/uploads/' .
                 addslashes($file) .
                 '.ogg"]';
        $replacement_string = addslashes($title) .
                              '<img src="https://outofthedepths.net/wp-content/uploads/2015/02/1423511367_menu2-16.png" class="song-menu_icon" /><div class="song-menu"><div class="song_contextual_menu"><a href="https://outofthedepths.net/albums/' .
                              addslashes($album) .
                              '/"><div class="song-menu_sections top_song-menu_section song-menu_divider">Go to the album</div></a><a href="https://outofthedepths.net/songbook/' .
                              addslashes($songbook-page) .
                              '/"><div class="song-menu_sections between_song-menu_sections song-menu_divider">Open in the songbook</div></a><a href="https://outofthedepths.net/wp-content/uploads/2015/01/force-download.php?file=' .
                              addslashes($file) .
                              '.mp3"><div class="song-menu_sections bottom_song-menu_section">Download this song</div></a></div></div><div class="audio_environment"><div class="audio_holder"><h1>' .
                              addslashes($title) .
                              '</h1>' .
                              do_shortcode($audio) .
                              '</div></div>';

        return $replacement_string;
}

And here is the css:

/* This is the styling for the clickable 'tr' on the songs page */
td {
	cursor: pointer;
}

/* This is the styling for the individual "songs" page. First up is the icon for the songs' personal menu */
.song-menu_icon {
	display: none;
	position: relative;
	bottom: -3px;
	right: -1px;
}

tr:hover > td > .song-menu_icon {
	display: inline;
}

.active_song-menu_icon {
	display: inline;
}

.song-menu {
	position: absolute;
	display: none;
	z-index: 1;
}

.song_contextual_menu {
	display: block;
	position: relative;
	height: 125px;
	width: 175px;
	background-color: rgb(250,250,250);
	border: 1px solid white;
	border-radius: 0 18px 18px 18px;
	-moz-border-radius: 0 18px 18px;
	-webkit-border-radius: 0 18px 18px 18px;
	box-shadow: 0 0 20px 5px rgb(212,212,212);
}

.top_song-menu_section {
	border-radius: 0 18px 0 0;
	-moz-border-radius: 0 18px 0 0;
	-webkit-border-radius: 0 18px 0 0;
}

.between_song-menu_sections {
}

.bottom_song-menu_section {
	border-radius: 0 0 18px 18px;
	-moz-border-radius: 0 0 18px;
	-webkit-border-radius: 0 0 18px 18px;
}

.song-menu_sections {
	width: 165px;
	padding: 10px 5px;
	text-align: center;
}

.song-menu_sections:hover {
	background-color: rgb(240,240,240);
}

.song_contextual_menu > a {
	color: black;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}

.song_contextual_menu > a:hover {
	color: #3f98db;
	text-decoration: none;
}

.song-menu_divider {
	border-bottom: 1px solid rgb(211,211,211);
}

/* This section is for the audio environment and all that it contains */
.audio_environment {
	display: none;
	position: fixed;
	left: 0;
	bottom: 0;
	height: auto;
	width: 100%;
	background-color: rgba(211,211,211,0.9);
	z-index: 5;
	box-shadow: 0 0 8px 5px rgb(211,211,211);
}

.audio_holder {
	display: block;
	margin: 20px 10%;
	width: 80%;
}