Play/Pause-Taste HTML5-Audio

Ich versuche, HTML5-Audio Abspielen/pause auf einer Taste. Wie würde ich nur gehen, um dies zu tun? So die play-Taste wechselt auf das pause-Symbol die schriftart awesome 'fa fa-pause' Der code ist hier: 

<audio id="myTune">
<source src="http://96.47.236.72:8364/;">
</audio>
<div class="btn-group btn-group-xs">
<a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview"     onclick="document.getElementById('myTune').play()"><i class="fa fa-play"></i></a>

Danke!

InformationsquelleAutor user3067306 | 2014-06-30
  1. 6

    Sie können eine id für die <i> - tag, und weisen Sie die fa fa-pause Klasse, wenn change-of-state: 

    <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview" onclick="aud_play_pause()"><i id="stateicon" class="fa fa-play"></i></a>

<script>
  function aud_play_pause() {
    var myAudio = document.getElementById("myTune");
    if (myAudio.paused) {
      $('#stateicon').removeClass('fa fa-play');
      $('#stateicon').addClass('fa fa-pause');
      myAudio.play();
    } else {
      $('#stateicon').removeClass('fa fa-pause');
      $('#stateicon').addClass('fa fa-play');
      myAudio.pause();
   }
 }

    Hoffe, das hilft

    • Zu schlecht, das funktioniert nur für einen Spieler zur Seite.
    • Ich habe ein paar änderungen für mehrere Spieler an einer Seite. Überprüfen Sie Antwort unten.
    InformationsquelleAutor martinezjc
  2. 3

    Geben diesem einen Wirbel:

    JS:

    function aud_play_pause() {
  var myAudio = document.getElementById("myTune");
  if (myAudio.paused) {
    myAudio.play();
  } else {
    myAudio.pause();
  }
}

    HTML:

    <audio id="myTune" src="http://www.rachelgallen.com/HappyBirthday.mp3"></audio>


<button type="button"  onclick="aud_play_pause()">Play/Pause</button>

    InformationsquelleAutor Rachel Gallen
  3. 1

    Hier haben Sie die version für mehrere Instanzen von Spieler

    HTML

    <a href="javascript:void(0)" onclick="aud_play_pause(this)">
    <i class="control icon-play"></i>
    <audio class="xnine-player" src="/path/to/file#1.mp3" preload="auto"></audio>
</a>

<a href="javascript:void(0)" onclick="aud_play_pause(this)">
    <i class="control icon-play"></i>
    <audio class="xnine-player" src="/path/to/file#2.mp3" preload="auto"></audio>
</a>

    JAVASCRIPT

    <script>
    function aud_play_pause(object) {
        var myAudio = object.querySelector(".xnine-player");
        var myIcon = object.querySelector(".control");
        if (myAudio.paused) {
            myIcon.className = "control icon-pause";
            myAudio.play();
        } else {
            myIcon.className = "control icon-play";
            myAudio.pause();
        }
    }
</script>

    ...

    InformationsquelleAutor X9DESIGN
Schreibe einen Kommentar