Search code examples
javascriptaudiobackbone.js

Backbone.js audio control

I have a Backbone view, it uses an html template, placed on the page:

<script type="text/template" id="webphone-template">
            <audio id="audio-ringtone" src="{% static "prime_app/assets/audio/ringtone.mp3" %}"></audio>
            <div class="well">
                <p class="text-muted text-center"><%= status %></p>
                <div class="text-center">
                    <button id="btn-webphone-answer" class="btn btn-success">
                        <i class="fa fa-phone"></i>
                    </button>
                    <button id="btn-webphone-terminate" class="btn btn-danger">
                        <i class="fa fa-phone"></i>
                    </button>
                </div>
            </div>
        </script>

My view has method ring(), which looks like this:

ring: function() {
        $("#audio-ringtone").get(0).play();
    }

But when this method is invoked audio doesn't play, no errors in JS console, the audio element is chosen correctly. What's the problem?

Solution

  • Finally, there was the following problem: audio-tag is in my view's element, when i call render(), it completely replaces all the HTML inside element, so if there is audio-element it just gets removed and the sound doesn't play anymore.