烟花代码编程html带声音

### HTML 烟花效果带声音代码示例

为了创建一个带有声音效果的HTML烟花展示，不仅需要CSS来处理视觉上的动画效果[^1]，还需要JavaScript和HTML音频标签相结合以加入音效。下面是一个简化版的例子：

#### CSS部分 (css-fireworks.css)

@-webkit-keyframes explosion {
    /* 定义爆炸的关键帧 */
}
/* 其他样式定义 */

这部分主要负责图形的变化过程，如颜色、大小以及位置等属性随时间变化的效果。

#### JavaScript部分

// 创建烟花并触发播放声音函数
function createFireworkWithSound() {
    let audio = new Audio('path_to_sound_file.mp3'); // 替换为实际路径
    const fireworkElement = document.createElement("div");
    fireworkElement.className = "firework";
    
    document.body.appendChild(fireworkElement);
    
    setTimeout(() => {
        fireworkElement.style.animationPlayState = 'running';
        audio.play();
        
        // 清理工作，在动画结束后移除元素
        fireworkElement.addEventListener('animationend', () => {
            document.body.removeChild(fireworkElement);
        });
    }, 0);  
}

document.querySelector('.trigger').addEventListener('click', createFireworkWithSound);

此脚本会在点击特定按钮时启动烟花动画，并同步发出一声响亮的声音。这里假设有一个名为`'path_to_sound_file.mp3'`的文件作为声源；请将其替换为真实的音频资源链接。

#### HTML结构

<button class="trigger">发射烟花</button>
<!-- 音频不会自动加载 -->
<audio id="explosion-sound">
  <source src="sounds/explosion.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<div style="position:relative; width:100%; height:80vh;">
  <!-- 动画将在页面上显示的位置 -->
</div>

这段HTML设置了用户界面组件——一个用于触发事件的按钮，还有一个隐藏的 `<audio>` 标签用来存储即将使用的音频片段。