Как получить аудио тег для воспроизведения?

Я меняю источник аудио тегов HTML5 динамически на основе текущего изображения в галерее.Как получить аудио тег для воспроизведения?

Но мой проигрыватель HTML5 Audio по какой-то причине не будет играть.

Вот мой игрок:

<div id="audioPlayer"> 
    <a onclick="playSound()"> 
     <audio class="audioPlayer" preload="none" controls src=""> 
      <source type="audio/ogg" src="" class="audio-ogg" /> 
      <source type="audio/mpeg" src="" class="audio-mp3" /> 
      <source type="audio/wav" src="" class="audio-wav" /> 
     </audio> 
     <img src="img/playBtn.png" alt="Play" /> 
    </a> 
</div> 


function loadSound(galleryIndex) { 
    document.getElementsByClassName('audio-ogg')[0].src = "sounds/" + galleryAudio.sounds[galleryIndex].ogg; 
    document.getElementsByClassName('audio-mp3')[0].src = "sounds/" + galleryAudio.sounds[galleryIndex].mp3; 
    document.getElementsByClassName('audio-wav')[0].src = "sounds/" + galleryAudio.sounds[galleryIndex].wav; 
} 

function playSound() { 
    // galleryAudio.tag.play(); 
    // console.log(document.getElementsByClassName('audioPlayer')[0]); 
    galleryAudio.tag.play(); 
    return false; 
} 

function initialise() { 
    galleryAudio.tag = document.getElementsByClassName('audioPlayer')[0]; 
} 

var galleryAudio = { 
    tag: null, 
    sounds: [{ 
      "ogg": "square.ogg", 
      "mp3": "square.mp3", 
      "wav": "square.wav" 
     }, { 
      "ogg": "rectangle.ogg", 
      "mp3": "rectangle.mp3", 
      "wav": "rectangle.wav" 
     }, { 
      "ogg": "circle.ogg", 
      "mp3": "circle.mp3", 
      "wav": "circle.wav" 
     }, { 
      "ogg": "equilateral-triangle.ogg", 
      "mp3": "equilateral-triangle.mp3", 
      "wav": "equilateral-triangle.wav" 
     }, { 
      "ogg": "isosceles-triangle.ogg", 
      "mp3": "isosceles-triangle.mp3", 
      "wav": "isosceles-triangle.wav" 
     }, { 
      "ogg": "right-angle-triangle.ogg", 
      "mp3": "right-angle-triangle.mp3", 
      "wav": "right-angle-triangle.wav" 
     }, { 
      "ogg": "scalene-triangle.ogg", 
      "mp3": "scalene-triangle.mp3", 
      "wav": "scalene-triangle.wav" 
     }, { 
      "ogg": "pentagon.ogg", 
      "mp3": "pentagon.mp3", 
      "wav": "pentagon.wav" 
     }, { 
      "ogg": "hexagon.ogg", 
      "mp3": "hexagon.mp3", 
      "wav": "hexagon.wav" 
     }, { 
      "ogg": "heptagon.ogg", 
      "mp3": "heptagon.mp3", 
      "wav": "heptagon.wav" 
     }, { 
      "ogg": "octagon.ogg", 
      "mp3": "octagon.mp3", 
      "wav": "octagon.wav" 
     } 
    ] 
}; 

window.addEventListener('load', initialise, true);

Почему не мой аудиоплеер играть?

источник

2013-04-20 Jamesking56

Что такое '' делать? –

Вызов моего метода воспроизведения звука на моей пользовательской кнопке воспроизведения – Jamesking56

, на каком браузере вы его тестируете? – razzak

Я установил ее!

Оказывается, если у вас есть <source> теги с src="" в аудио теге, он попытается воспроизвести чистый источник звука.

Мне просто нужно было снять это и эй престо!

источник

2013-04-21 00:21:14 Jamesking56

Потому что loadSound никогда не вызывается.

window is loaded 
    └─ initialise() 

button clicked 
    └─ playSound() 
     └─ galleryAudio.tag.play()

Попробуйте это:

<audio oncanplay="playSound()" src="...">

источник

2013-04-21 00:07:17

loadSound вызывается из другого JS-файла, который связан с изображениями галереи. Я проверил это, добавив 'alert()' внутри функции – Jamesking56

@ Jamesking56. Тогда это может быть связано с тем, что звуковой файл еще не загружен. Вы подождали некоторое время и посмотрели? –

Файл является локальным, и я подождал некоторое время, и я все еще не могу играть через свою пользовательскую кнопку воспроизведения или элементы управления по умолчанию – Jamesking56

Как получить аудио тег для воспроизведения?

ответ

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