JavaScriptを使用してオーディオエレメントを制御する方法

最初に、デフォルトのhtml5標準コントロールを使用しないようにしています。可能であればjQueryを使用して喜んでもらいたいと思いますが、問題は。JavaScriptを使用してオーディオエレメントを制御する方法

現時点では、一度クリックすると一時停止ボタンに変わるいくつかの音楽を再生する再生ボタンを持っています。この一時停止ボタンは、明らかにクリックされた音楽を一時停止します。

私はいくつかの注釈を残して、私が試したことのいくつかを見ることができます。現在、再生ボタンは表示されますが、クリックすると何も起こりません。

ご協力いただければ幸いです。

HTML：

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="javascript/audio-controls.js"></script> 
<link rel="stylesheet" href="css/menu.css"> 
</head> 

<div id="content-container"> 
    <audio id="music"> 
    <source src="media/mexico-music.mp3" type="audio/mpeg"/> 
    </audio> 
    <button id="play-music-button" class="play"></button> 
</div>

CSS：

#play-music-button { 
    height:60px; 
    width: 60px; 
    border: none; 
    background-size: 50% 50%; 
    background-position: center; 
} 

.play { 
    background: url("../assets/play.png") no-repeat; 
} 

.pause { 
    background: url("../assets/pause.png") no-repeat; 
}

JS：

$(document).ready(function() { 
var music = document.getElementById("music"); 
var play_music_button = document.getElementById("play-music-button"); 

function playAudio() { 
    if (music.paused) { 
     music.play(); 
     play_music_button.innerHTML = "Pause"; 
     /*play-music-button.className = ""; 
     play-music-button.className = "pause";*/ 
    } else { 
     music.pause(); 
     play_music_button.innerHTML = "Resume"; 
     /*play-music-button.className = ""; 
     play-music-button.className = "play";*/ 
    } 
    music.addEventListener('ended',function() { 
     play_music_button.innerHTML = "Play"; 
    }); 
} 
play-music-button.addEventListener("click", playAudio); 
});

出典

2017-02-27 Xander

にボタンを設定するendedイベントリスナーを追加する必要があります有効な識別子）。 'addEventListener'を二度追加することで、何が起こるのかははっきりしません。 –

doc ready関数内に追加するか外部に追加するかはわかりませんでしたので、現在の両方の理由になります。 @MikeMcCaughan – Xander

あなたはplay-music-buttonとしてplay_music_buttonを呼んでいる、とあなただけ必要なときは、その二回定義されてきましたそれはあなたの定義された関数の中にあります。そして、あなたはあなたのJavaScriptコードは（ `プレイ音楽button`ではありません、今それで構文エラーを持っているバック

を「再生」

$(document).ready(function() { 
 
    var music = document.getElementById("music"); 
 
    var play_music_button = document.getElementById("play-music-button"); 
 

 
    function playAudio() { 
 
    if (music.paused) { 
 
     music.play(); 
 
     play_music_button.className = 'pause'; 
 
    } else { 
 
     music.pause(); 
 
     play_music_button.className = 'play'; 
 
    } 
 
    music.addEventListener('ended',function() { 
 
     play_music_button.className = 'play'; 
 
    }); 
 
    } 
 
    play_music_button.addEventListener("click", playAudio); 
 
});

#play-music-button { 
 
    height: 60px; 
 
    width: 60px; 
 
    border: none; 
 
    background-size: 50% 50%; 
 
    background-position: center; 
 
} 
 

 
.play { 
 
    background: url("https://image.flaticon.com/icons/png/512/0/375.png") no-repeat; 
 
} 
 

 
.pause { 
 
    background: url("http://downloadicons.net/sites/default/files/pause-icon-14021.png") no-repeat; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content-container"> 
 
    <audio id="music"> 
 
    <source src="http://skwaat.com/clips/iloveyou.mp3" type="audio/mpeg"> 
 
    </audio> 
 
    <button id="play-music-button" class="play"></button> 
 
</div>

出典

2017-02-27 17:50:28

助けてくれてありがとう、多くのエラーが解決されていますが、まだ動作していません。ボタンにテキストがなく、代わりに画像を使用しようとしていると思われるのでしょうか？それがどのように影響するのか分かりませんが、それは異なったものです。私は現在のコードで質問を更新します@MichaelCoker – Xander

@EthanBristow何がうまくいかないのですか？私のデモは動作しませんか？ innerHTMLの代わりに背景イメージの変更を引き起こすクラスを変更するための私の答えを更新しました。 –

これは今、うまく動作しました@MichaelCoker – Xander

JavaScriptを使用してオーディオエレメントを制御する方法

答えて

関連する問題