jqueryを使用して再生と一時停止ボタンを切り替えてオーディオを再生するにはどうすればよいですか？

Question

私はjavascriptが初めてです。これは、おそらく私が達成しようとしていることについては正しい方法ではありませんが、タイトルが言うように、私はオーディオファイルを再生し、一時停止と再生ボタンとして動作する2つの画像を切り替えようとしています。以下は私がこれまで持っていたものですが、私は一時停止ボタンを隠すことができず、再生ボタンを表示することができません。

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(); 

誰かが間違っていると指摘できますか？

Answer 1

あなたのコードでは、コードの最後に余分な});がありません。

あなたが指定しなかったので、ページの読み込みやボタンのクリックでオーディオを再生するかどうかは分かりません。そのため、2つの異なる実装方法を提供しますボタンをクリックするとオーディオ再生が開始されます（createElement(audio)ではなくnew Audioを使用）。両方の方法が素晴らしいです。

playingとpausedのイベントリスナーを追加したい場合は、これはそれを行う方法です：

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>

もう一つの簡単な方法はnew Audio()を使用することです：

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>