Wie kann ich jquery verwenden, um Audio mit einer hin- und hergehenden Wiedergabe- und Pause-Taste abzuspielen?

Question

Ich bin neu in Javascript. Dies ist wahrscheinlich nicht der richtige Weg, um das zu erreichen, was ich erreichen möchte, aber wie der Titel sagt, versuche ich eine Audiodatei abzuspielen und zwischen zwei Bildern hin- und herzuschalten, die als Pause- und Wiedergabeschaltfläche fungieren. Unten ist, was ich bisher habe, ich kann nicht scheinen, die Pause-Taste zu verstecken und die Play-Taste zu zeigen.

var audioElement = document.createElement('audio'); 
audioElement.setAttribute('src', 'audio/track.mp3'); 
audioElement.setAttribute('autoplay', 'autoplay'); 
//audioElement.load() 
$.get(); 
audioElement.addEventListener("load", function() { 
audioElement.play(); 
}, true); 

if (audioElement.paused) { 
     audioElement.play(); 
     $('.pause').show(); 
     $('.play').hide(); 
    } 
else { 
     audioElement.pause(); 
     $('.play').show(); 
     $('.pause').hide(); 
    } 


$('.play').click(function() { 
audioElement.play(); 
}); 


$('.pause').click(function() { 
audioElement.pause(); 

Würde jemand in der Lage sein, darauf hinzuweisen, wo ich falsch liege?

Answer 1

In Ihrem Code fehlt eine zusätzliche }); am Ende des Codes.

Ich weiß nicht, ob Sie die Audio beim Laden der Seite oder auf einen Klick auf eine Schaltfläche wiedergeben möchten, wie Sie nicht angegeben, deshalb werde ich Ihnen zwei verschiedene Möglichkeiten der Implementierung, zuerst, wer startet die Audio beim Laden der Seite und zweitens startet das Audio auf Knopfdruck (auch mit new Audio anstelle von createElement(audio)). Beide Wege sind großartig.

Wenn Sie es auf Ihre Weise tun möchten, können Sie Ereignislistener für playing und paused hinzufügen. Dies ist eine Möglichkeit, es zu tun:

var audioElement = document.createElement('audio'); 
 
audioElement.id = 'audio-player'; 
 
audioElement.controls = 'controls'; 
 
audioElement.autoplay = 'autoplay'; 
 
audioElement.src = 'http://www.archive.org/download/bolero_69/Bolero.mp3'; 
 
audioElement.type = 'audio/mpeg'; 
 

 
audioElement.addEventListener('playing', function() { 
 
    $('.pause').css('display', 'inline-block'); 
 
    $('.play').hide(); 
 
}, false); 
 

 
audioElement.addEventListener('paused', function() { 
 
    $('.pause').hide(); 
 
    $('.play').css('display', 'inline-block'); 
 
}, false); 
 

 
$('.play').on('click', function() { 
 
    $(this).hide(); 
 
    $('.pause').css('display', 'inline-block'); 
 
    audioElement.play(); 
 
}); 
 

 
$('.pause').on('click', function() { 
 
    $(this).hide(); 
 
    $('.play').css('display', 'inline-block'); 
 
    audioElement.pause(); 
 
});

.play, 
 
.pause { 
 
    width: 50px; 
 
    height: 50px; 
 
    display: inline-block; 
 
} 
 
.play { 
 
    background: transparent url('https://cdn4.iconfinder.com/data/icons/social-messaging-productivity-1/128/play-icon-2-128.png') no-repeat; 
 
    background-size: cover; 
 
} 
 
.pause { 
 
    background: transparent url('https://cdn1.iconfinder.com/data/icons/material-audio-video/20/pause-circle-outline-128.png') no-repeat; 
 
    background-size: cover; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class='play'></span> 
 
<span class='pause'></span>

Eine weitere einfache Möglichkeit wäre new Audio() zu verwenden:

var audioElement = new Audio('http://www.archive.org/download/bolero_69/Bolero.mp3'); 
 

 
$('.play').on('click', function() { 
 
    $(this).hide(); 
 
    $('.pause').css('display', 'inline-block'); 
 
    audioElement.play(); 
 
}); 
 

 
$('.pause').on('click', function() { 
 
    $(this).hide(); 
 
    $('.play').css('display', 'inline-block'); 
 
    audioElement.pause(); 
 
});

.play, 
 
.pause { 
 
    width: 50px; 
 
    height: 50px; 
 
    display: inline-block; 
 
} 
 
.play { 
 
    background: transparent url('https://cdn4.iconfinder.com/data/icons/social-messaging-productivity-1/128/play-icon-2-128.png') no-repeat; 
 
    background-size: cover; 
 
} 
 
.pause { 
 
    background: transparent url('https://cdn1.iconfinder.com/data/icons/material-audio-video/20/pause-circle-outline-128.png') no-repeat; 
 
    background-size: cover; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class='play'></span> 
 
<span class='pause'></span>