Звуки не воспроизводятся

У меня есть HTML-страница с шестью кнопками. Каждая кнопка имеет обработчик события onClick, и при нажатии будет воспроизводиться звук. Звуки в формате mp3. Теперь, когда я нажимаю на любую кнопку, звук будет воспроизводиться, но если я нажму на другую кнопку, когда воспроизводится первый звук, то первый звук перестанет воспроизводиться. После этого, если я нажму на любую кнопку, звук не будет воспроизводиться.

Я не могу понять проблему. Спасибо за помощь.

Вот мой код.

<div
    style='display: block; background-image: url(./images/backgroundImage.jpg);' >

    <button class="stage1" id="button_1" style="width: 280px;height: 130px; margin-top: 40px;margin-left: 40px; background: transparent;  "onclick="audio('a')" ></button>
    <button class="stage1" id="button_2" style="width: 280px;height: 340px; margin-top: 20px;margin-left:960px;background: transparent; "onclick="audio('ab')"></button>

    <button class="stage1"  id="button_3" style="width: 220px;height: 250px; margin-top: 390px;margin-left: 40px;background: transparent; "onclick="audio('abc')"></button>
    <button class="stage1"  id="button_4" style="width: 220px;height: 250px; margin-top: 390px;margin-left: 300px;background: transparent; "onclick="audio('abcd')"></button>
    <button class="stage1"    id="button_5" style="width: 220px;height: 250px; margin-top: 390px;margin-left:560px;background: transparent; "onclick="audio('abcde')"></button>
    <button class="stage1"  id="button_6" style="width: 400px;height: 250px; margin-top: 390px;margin-left:840px;background: transparent; "onclick="audio('abcdef')"></button>
</div>

В Javascript:

function audio(audio_name) {
    audioElement.setAttribute('src', 'audio/' + audio_name + '.mp3');
    audioElement.play();
}

javascript html tizen
person User42590    schedule 03.06.2013    source источник
comment
Можете ли вы опубликовать весь код со всеми кнопками?   -  person Harsha Venkatram    schedule 03.06.2013
comment
см. мой обновленный вопрос   -  person User42590    schedule 03.06.2013
comment
Теперь я запутался в вашем вопросе. Должна ли одна и та же кнопка воспроизводить и приостанавливать звук? Можете ли вы объяснить правильно?   -  person Harsha Venkatram    schedule 03.06.2013
comment
@ User42490: Но вы упомянули о pause в своем предыдущем комментарии, который вы только что удалили!   -  person Harsha Venkatram    schedule 03.06.2013
comment
Фактически на всех этих кнопках у меня есть функция onclick, которая будет воспроизводить звук при нажатии. Теперь, когда я нажимаю кнопку_1, он воспроизводит звук с именем a, а когда я нажимаю кнопку_2, он воспроизводит звук с именем ab. все звуки находятся в моей папке audion с именем a.mp3,ab.mp3,abc.mp3,abcd.mp3,abcde.mp3,abcdef.mp3. Теперь у меня есть звук a.mp3 с небольшой длительностью, но у меня есть звук ab.mp3 с немного большей продолжительностью. Теперь, когда я нажимаю на звук ab.mp3 означает, что на button_2 будет воспроизводиться звук.   -  person User42590    schedule 03.06.2013
comment
Теперь звук воспроизводится, и я нажимаю на звук a.mp3, что означает кнопку_1, тогда этот звук не будет воспроизводиться, потому что длинный звук был перехвачен.   -  person User42590    schedule 03.06.2013

Ответы (3)


arrow_upward
2
arrow_downward

Ссылаясь на этот вопрос SO - хотя он использует jQuery - вам нужно pause и load перед воспроизведением новой песни.

function audio( audio_name ) {
    audioElement.setAttribute('src', 'audio/' + audio_name + '.mp3');
    audioElement.pause();
    audioElement.load(); // This is probably the important part.
    audioElement.play();
}
person Kiruse    schedule 03.06.2013
comment
я попробовал ваше предложение, но оно не работает в моей проблеме - person User42590; 03.06.2013

arrow_upward
1
arrow_downward

Не могли бы вы попробовать это?

function audio(audio_name) {
    var audioElement = document.createElement('audio');        
    audioElement.setAttribute('src', 'audio/' + audio_name + '.mp3');
    audioElement.play();

}
person Harsha Venkatram    schedule 03.06.2013
comment
если я создам audioElement в аудиофункции, то предыдущий звук не будет останавливаться на новом звуке. Итак, как избавиться от этого. И если создать audioElement вне этой функции, то возникнет рассматриваемая проблема. - person User42590; 03.06.2013

arrow_upward
1
arrow_downward

просто сделал это, и это работает. Я искал именно это

var audioElement = document.createElement('audio');

function audio(audio_name) {
Disable();
audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'audio/' + audio_name + '.ogg');
audioElement.load();
audioElement.play();

}
function Disable() {

audioElement.pause();

}
person User42590    schedule 03.06.2013