Hello. I build a music gallery where users can click on various < audio > elements and listen to songs.
The problem is that many of the songs have an apostrophe in the song title and that is causing issues with the song not being recognized by the < audio > element or the song title not rendering correctly in my HTML.
Is there an easy way to make it so my browser doesn’t misinterpret the HTML when it comes across an apostrophe?
Exactly as people always put special characters in html.
Hi there UpstateLeafPeeper,
Is you code like this…
<audio controls>
<source src="Some'title.mp3" type="audio/mpeg">
</audio>
…or like this…
<audiocontrols>
<source src='M'bube.mp3' type='audio/mpeg'>
</audio>
The former works, the latter fails.
coothead
I’m not sure what you are suggesting…
My code looks like this…
<ul>
<li>
<span>Who's Crying Now</span>
<audio class=audioPlayer2" controls loop title="Journey - Who's Crying Now">
<source src="/client1/audio/journey - who's crying now.mp3">
</audio>
</li>
</ul>As you can see, there are 3 places where an apostrophe can break my HTML, and that is what I need help with - because to the end user, that apostrophe makes things proper English! 
Hi there UpstateLeafPeeper,
it’s not the apostrophe that is the cause of your woes. 
It is the white space and the hyphen 
coothead
Actually it is the apostrophes, because all of my songs have spaces and hypens in them and the web page loads okay and the music plays okay with them.
For example…
<ul>
<li>
<span>Zombies - Time Of The Season</span>
<audio class=audioPlayer2" controls loop title="Zombies - Time Of The Season">
<source src="/client1/audio/Zombies - Time Of The Season.mp3">
</audio>
</li>
</ul>Hi there UpstateLeafPeeper,
my tests with Windows 7 and Firefox 71.0, Chrome 79.0 and IE11
show that anything like this…
<source src="/client1/audio/Zombies - Time Of The Season.mp3">
will not play, whilst something like this…
<source src="/client1/audio/ZombiesT'imeOfTheSeason.mp3">
…will.
What OS/browser does it work for you?
coothead
Since my IDE is on my Mac, I do my primary development on macOS with FireFox 71.0 and then Chrome 72.0
When I post code simple samples here (e.g. just HTML/CSS) I do so using my notebook with Windows 10 and Chrome.
Either way, what can I do to improve things so my songs play on all OS’s and all browsers?
It sounds like spaces, hyphens and apostrophes trip up different browsers and OS’s?
It would be a pain in the ass to have to change all of my songs to “Zombies_TimeOfThSeason.mp3” and even worse if I cannot have the HTML titles/labels be properly formatted English.
That being said, we must be missing something here, because any modern OS I have seen will take any characters and spaces in filenames…
Hi there UpstateLeafPeeper,
I do apologise for my previous post, I had an
error in my test code which I did not see. 
This does work
<source src="/client1/audio/Zombies - Time Of The Season.mp3">
The actual cause of your problem is a missing double quote here…
<audio class=audioPlayer2" controls loop title="Journey - Who's Crying Now">
…and here…
<audio class=audioPlayer2" controls loop title="Zombies - Time Of The Season">
…after the class=
coothead
The source is a link and can be renamed:
<source src="/client1/audio/song-001.mp3">
If the file is PHP then applying the PHP htmlspecialchars(…) should also work.
Okay.
That was just a type-o when I hand typed - as I often do - my code here in the forum.
My actual code on my Mac is correct.
But is it a problem to have spaces, hyphens and apostrophes in a file name?
Can you please explain how I would do that?
Fwiw, sometimes I intermingle HTML and PHP which is common, but in this particular case I am using straight up HTML, so I don’t thin that would help.
So that comes back to my OP in asking what HTML or the browsers don’t like about an apostrophe in my HTML, e.g. title=“Journey - Who’s Crying Now” or < source src=“Journey - Who’s Crying Now” type=“mpeg/audio” >
It appears there is a problem which is why you raised this Topic.
Did you check the link and try the examples? Is there anything specific you did not understand?
If the files are HTML and not PHP then the PHP function cannot be used 
It is a php file, but the HTML section is pure HTML, and I’d prefer not to echo the HTML just to use a php function.
How do you allow apostrophes to be used with straight HTML - especially examples like above?
I think PHP urlencode(…) is a better function…
Here we go:
<?php
declare(strict_types=1);
error_reporting(-1);
ini_set('display_errors', '1');
$aLinks = [
"Journey - Who's Crying Now",
"Zombies - Time Of The Season",
"Queen - Don't Stop Me Now",
"Moody Blues - It's Up To You",
"Elvis Presley - Can't Help Falling In Love",
];
//====================================================
function audioLink(
int $id,
array $aLinks
):string
{
$tmp = urlencode( $aLinks[$id] );
// NO TRAILING SPACES AFTER ____EOT or ____EOT;
$result = <<< ____EOT
<li>
<audio
class="audioPlayer2"
controls loop title="{$aLinks[$id]}">
<source src="/client1/audio/$tmp">
</audio>
<span> {$aLinks[$id]} </span>
</li>
____EOT;
return $result;
}//
$uList = '<ul>';
foreach($aLinks as $key => $name) :
$uList .= audioLink($key, $aLinks);
endforeach;
$uList .= '</ul>';
echo $uList ;
So apparently you have to use PHP to encode apostrophes and you cannot accomplish that directly with HTML, huh?
What PHP outputs is just HTML, so yes you can do it manually in HTML, it’s just PHP will automate the encoding.
To do it manually see my initial reply.
%hex code for URLs, HTML Number or Name for general HTML.
You didn’t respond to my question about that…
First off, there is no apostrophe listed in that link.
If I used a single quote, then I would add & # 39 ; in my HTML wherever I wanted a single quote and then that wouldn’t break things like the < audio > tag?
Was that your advice?
Here is another reference, easily found with an internet search engine:-
https://dev.w3.org/html5/html-author/charref
It just doesn’t include the hex codes needed for URLs.
It may break, because you put unwanted spaces in it.
Written properly, without the spaces it will appear on the page as a single quote, but as far as the code is concerned, it is not one. So you can have:-
<audio class='audioPlayer2' controls loop title='Journey - Who's Crying Now'>
…without problems. Note use of single quotes.
<audio class='audioPlayer2' controls loop title='Journey - Who's Crying Now'>
Whereas this would be broken.