.play(); not working for html5 audio

Question

I have been working on my javascript skills but I encountered a problem where the audio wasn't being played when clicked here is my code.

<div class="player_container">
<button class="play_pause_button" type="button" title="Play" onclick="play_pause"></button>
        <audio class="audio_player" preload="auto">
           <source src="audio/test.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
</div>
    <script type="text/javascript">
    var content = document.getElementsByClassName('audio_player'),
    play_pause = document.getElementsByClassName('play_pause_button'),
    progress = document.getElementsByClassName('player_progress');
    function play_pause() {
        return content.play();
    }
    </script>

Answer 1

document.getElementsByClassName('audio_player') returns a HTMLCollection object and not an individual node. You need to specify which object in the collection you mean before sending commands to it.

Changing return content.play(); to return content[0].play(); should fix your problem.