My repetition of playButton resulted in an error in the suggested code, which should have been button instead.
I've corrected that error in the above post.
From what I see in https://jsfiddle.net/87serhpf/5/ you've put the
<audio> element inside of the wrap, but the
<audio> element is still not inside of the playButton element.
When it is, the following code will work:
var player = button.querySelector("audio");
Why document.querySelector is the wrong approach, is that it will always find only the first audio element on the page, which cannot work when you have multiple audio elements.
<audio> element inside of the playButton element, and button.querySelector will be able to properly do its job.
I now must leave, but will return in a while.