如何让音频标签播放？答案

【问题标题】：How to get Audio Tag to play?如何让音频标签播放？
【发布时间】：2013-04-21 08:21:14
【问题描述】：

我正在根据图库中的当前图像动态更改 HTML5 音频标记源。

但由于某种原因，我的 HTML5 音频播放器根本无法播放。

这是我的播放器：

<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);

为什么我的音频播放器无法播放？

【问题讨论】：

<a> 在做什么？
在我的自定义播放按钮上调用我的播放声音方法
你在哪个浏览器上测试它？

标签： javascript html

【解决方案1】：

因为loadSound 永远不会被调用。

window is loaded
  └─ initialise()

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

试试这个：

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

【讨论】：

loadSound 是从我拥有的另一个 JS 文件中调用的，该文件链接到图库图像。我已经通过在函数中添加alert() 验证了此方法
@Jamesking56 - 那可能是因为声音文件还没有加载。你等了一会儿看看吗？
该文件是本地文件，我已经等了一段时间，我仍然无法通过我的自定义播放按钮或默认播放控件播放

【解决方案2】：

我已经修好了！

事实证明，如果您的音频标签中有<source> 标签和src=""，它会尝试播放空白音频源。

我只需要删除它就可以了！

【讨论】：