これで、どの曲を再生するかを決める変数を与えることができました(このコードは複数の曲にリダイレクトする複数のボタン)。ボタンを押して別の曲を再生するときに再生中の曲を停止させる機能を構築したい
問題は、1つのボタンを押してから別のボタンを押すと、2つの曲が同時に再生されるという問題です。今問題は、選択した曲を再生する前に、すべての曲が一時停止していることを実装する方法です。
私はjQuery経由で配列を作成し、配列に.stopを適用することを考えましたが、それはうまくいかないようです。
コード:
function aud_play_pause(n) {
var myAudio = document.getElementById("Audio" + n);
var taskArray = new Array();
$('audio[id^="Audio"]').each(function() {
taskArray.push($(this).val());
});
if (myAudio.paused) {
taskArray.pause();
myAudio.play();
} else {
myAudio.pause();
}
}
ここに私の抜粋です:
(mp3ファイルが含まれていません - それはそれはしかし働きエラーをスロー理由です、私はプロム:D)を
function aud_play_pause(n) {
var myAudio = document.getElementById("Audio" + n);
var taskArray = new Array();
$('audio[id^="Audio"]').each(function() {
taskArray.push($(this).val());
});
if (myAudio.paused) {
taskArray.pause();
myAudio.play();
} else {
myAudio.pause();
}
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
.btn {
font-family: 'Open Sans';
background-color: #4a4a4a;
display: inline-block;
border-radius: 42px;
cursor: pointer;
color: #ffffff;
margin: 5px;
font-size: 17px;
font-weight: 3px;
height: 3em;
width: 22em;
text-decoration: none;
border: 0;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.btn:hover,
.btn:focus,
.btn:active {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
background-color: #CF4647;
outline: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Handy Page</title>
<link rel="icon" href="DragOn.ico">
<link rel="stylesheet" href="stylesheet.css">
<script type="text/javascript" src="code.js"></script>
</head>
<body bgcolor=#000000>
<button class="btn" type="button" onclick="aud_play_pause(1)">Delax</button>
<button class="btn" type="button" onclick="aud_play_pause(2)">Daft Punk</button>
<button class="btn" type="button" onclick="aud_play_pause(3)">8-bit</button>
<button class="btn" type="button" onclick="aud_play_pause(4)">Godwolf</button>
<button class="btn" type="button" onclick="aud_play_pause(5)">Bounce</button>
<audio class="music" id="Audio5" src="Orkestrated and Fries & Shine ft. Big Nab - Melbourne Bounce (Deorro Remix).mp3" type="audio/mp3">
Your browser does not support the HTML5 Audio element.
</audio>
<audio class="music" id="Audio4" src="Godwolf - Love Is A Battlefield.mp3" type="audio/mp3">
Your browser does not support the HTML5 Audio element.
</audio>
<audio class="music" id="Audio3" src="unreal superheroe.mp3" type="audio/mp3">
Your browser does not support the HTML5 Audio element.
</audio>
<audio class="music" id="Audio2" src="Daft Punk - Harder Better Faster Stronger RMX.mp3" type="audio/mp3">
Your browser does not support the HTML5 Audio element.
</audio>
<audio id="Audio1" source src="Delax - Drop You Like.mp3" type="audio/mp3">
Your browser does not support the HTML5 Audio element.
</audio>
コーディング(昨日から)。
私はインターネット上で何も見つけられなかったので誰もそれを尋ねる誰もそれを聞いていないか、まだ誰もそれをまだ尋ねなかったので、答えはとても明白です。
ありがとうございます!