Я хочу построить функцию, которая останавливает воспроизведение песни, когда я нажимаю кнопку, чтобы начать другую.

Я сделал так, чтобы вы могли присвоить функции переменную, которая решает, какая песня будет воспроизводиться (этот код используется для несколько кнопок, которые перенаправляются на несколько композиций).Я хочу построить функцию, которая останавливает воспроизведение песни, когда я нажимаю кнопку, чтобы начать другую.

Проблема в том, что если я нажму одну кнопку, а затем другую, то одновременно будут воспроизводиться две песни. Теперь вопрос заключается в том, как реализовать, чтобы все песни были приостановлены до того, как выбранный будет воспроизведен.

Я думал о создании массива через 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>

Я чрезвычайно новичок в кодирование (со вчерашнего дня).

Таким образом, либо ответ настолько очевиден, что никто не посмеет спросить об этом, или только никто его не спросил (потому что я не мог найти что-либо в Интернете).

Заранее благодарен!

источник

2016-11-01 Lu Box

Массивы не имеют метода .pause(), поэтому вы получите сообщение об ошибке taskArray.pause().

Что вы могли бы сделать вместо этого цикла по элементам и приостановить их непосредственно, а не с помощью массива:

function aud_play_pause(n) { 
    var myAudio = document.getElementById("Audio" + n); 

    if (myAudio.paused) { 
    $('audio[id^="Audio"]').not(myAudio).each(function() { 
     this.pause(); 
    }); 
    myAudio.play(); 
    } else { 
    myAudio.pause(); 
    } 
}

(Отметим также, что использование $(this).val() в цикле .each() не имеет смысла, так как <audio> элементы не имеют value)

источник

2016-11-01 03:40:20 nnnnnn

Поскольку я вижу, что вы используете JQuery вы можете сделать:.

$('#Audio1')[0].play()

Из моего собственного опыта jQuery не предоставляет функцию play(), поэтому вам нужно вызвать play() на реальном аудиообъекте, что и делает код выше (индекс равен «0», так как селектор должен вернуться результат с одной записью). Если вы хотите приостановить все, включить что-то вроде:

$('audio').forEach(function (entry) { 
    entry.pause(); 
})

Кроме того, HTML, должно быть что-то в виде:

<audio id="Audio1"> 
    <source src="myfile.mp3"> 
</audio>

BTW как стиль примечания, JS конвенции предполагает имена функций должны быть в ГорбатыйРегистр ,

Кроме того, для получения дополнительной информации селекторов (текст между $(...)) см: http://api.jquery.com/category/selectors/

источник

2016-11-01 03:47:38

Я хочу построить функцию, которая останавливает воспроизведение песни, когда я нажимаю кнопку, чтобы начать другую.

ответ

Смежные вопросы